zdjęcia, photos, images

Prosta karuzela, slider na stronę internetową z Owl Carousel

Czas czytania: 4 minut

Osobiście z Owl Carousel korzystam już od dobrych kilku lat i jak na razie jeszcze mnie nie zawiodła.Nazwa Owl Carousel bywa dla wielu myląca jednak z pewnością to wielofunkcyjne narzędzie a nie sama karuzela. Kilka osób, którym je zaprezentowałam było po prostu zachwyconych. Powodów jest kilka, ale najważniejszym chyba jest łatwa konfiguracja oraz dalsza rozbudowa skryptu.

źródło: https://owlcarousel2.github.io/OwlCarousel2/

 

Cechy Owl Carousel

Owl Carousel posiada ponad 60 opcji podstawowej konfiguracji, którą w szybki sposób można zmodyfikować lub rozwinąć o dodatkowe opcje (np. z CSS). Karuzela jest też w pełni responsywna – dobrze skonfigurowana sprawdza się zarówno na komputerze jak i na urządzeniach mobilnych. Na obu typach urządzeń możemy przewijać ją na kilka sposobów takich jak:

  • przewijanie (przeciąganie),
  • strzałki po bokach
  • lub kropki umieszczone pod obrazami.

Kolejnym plusem skryptu jest jego kompatybilność z przeglądarkami. Działa praktycznie w każdej przeglądarce w identyczny sposób.

 

źródło: https://owlcarousel2.github.io/OwlCarousel2/
Przykłady realizacji:

Ręczne przewijanie

See the Pen
Owl Carousel – YouTube Style
by Mohan Khadka (@khadkamhn)
on CodePen.

Auto przewijanie slidów

See the Pen
Owl Cards
by Stephen Scaff (@StephenScaff)
on CodePen.

Automatyczne z animacjami

See the Pen
Ken Burns effect
by Aura (@Julka85)
on CodePen.

Zalety Owl Carousel

Owl Carousel posiada wiele zalet:

  • stabilność
  • możliwość użycia kilku różnych karuzel na jednej stronie
  • łatwość w rozbudowy (np. możemy jednocześnie używać tekstu i obrazów)
  • jest RWD
  • łatwo można modyfikować wygląd

 

Budowa prostej karuzeli

Na początek potrzebujemy kilka grafik, które umieścimy w naszej karuzeli np.

zdjęcia, photos, images


Następnie pobieramy ze strony archiwum zip -> Download. Znajdziecie tam również linki do demo.

Najważniejszymi plikami są:

  • owl.carousel.min.css
  • owl.theme.default.min.css
  • owl.carousel.js
  • oraz jquery.min.js jeśli go nie dodaliśmy do wcześniej strony

Należy je zaimplementować na stronie w odpowiednim miejscu. Można to zrobić na 2 sposoby – pierwszy z zachowaniem struktury katalogowej archiwum i drugi polegający na umieszczeniu ważniejszych plików w odpowiednich katalogach np. pliki CSS do innych CSS.

Dodajemy style CSS

Pliki z stylami są bardzo istotne (przynajmniej na początku). Jeżeli źle je zamieścimy efekt naszej pracy będzie niewidoczny! Dzieje się tak dlatego, że domyślne ustawienie dla karuzeli to display:none. Dopiero pliki CSS nadpisują to ustawienie.

 <!-- Owl Stylesheets -->
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
Struktura html – czyli co umieszczamy w kodzie strony:

To co umieszczę poniżej jest dość istotne. Całkiem sporo osób rezygnuje bowiem z Owl Carusell bo nie potrafi zbudować karuzeli lub pokazu w HTML. Bezmyślnie kopiują oni kod HTML z gotowych przykładów zamieszczonych na stronach. A taki kod nie zadziała! Jest on bowiem zmodyfikowany już przez JavaScript.

Bazowa struktura HTML jest bardzo prosta!

<div class="owl-carousel owl-theme">
    <div><h4>1</h4></div>
    <div><h4>2</h4></div>
    <div><h4>3</h4></div>
</div>

Powyższy przykład zawiera jedynie ponumerowane elementy bez treści.

Wszystkie nowe elementy (grafiki) będziemy umieszczać w pomiędzy:

<div class="owl-carousel owl-theme"></div>

Każdy nowy obiekt – slide to

<div><h4>nowy</h4></div>

Teraz zastąpimy w przykładzie liczby naszymi grafikami;

<div class="owl-carousel owl-theme">
    <div><img src="https://www.aurainweb.pl/wp-content/uploads/2018/03/office-6-150x150.jpg"></div>
    <div><img src="https://www.aurainweb.pl/wp-content/uploads/2018/03/office-7-150x150.jpg"></div>
    <div><img src="https://www.aurainweb.pl/wp-content/uploads/2018/03/office-5-150x150.jpg"></div>
</div>

Taki kod HTML na początek w zupełności wystarczy. W tym momencie karuzela jeszcze nie będzie działać. A kod jaki zobaczymy w podglądzie strony będzie taki sam jak to co zapisaliśmy.

Dodajemy biblioteki JS

Musimy dodać jeszcze kod jquery, określający funkcje i zachowanie karuzeli.

Na początek dodamy podstawowe skrypty:

<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

Bez nich nasza prezentacja nie będzie działać. Następnie określimy w jaki sposób slidy będą się zmieniać, oraz to w jaki sposób je wyświetlimy.

Przykładowo będzie to coś takiego:

var owl = $('.owl-carousel');
owl.owlCarousel({
    loop:true,
    nav:true,
    margin:10,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },            
        960:{
            items:5
        },
        1200:{
            items:6
        }
    }
});

 

Ważną cechą kodu jest zadeklarowanie RWD. Jak możecie zobaczyć poniżej warunek responsive określa ilość widocznych slidów w zależności od szerokości.

Każda liczba to swoista granica – min-width minimalna szerokość. Czyli poniżej 600px szerokości strony pokazywać się będzie tylko 1 obrazek a po wyżej 3 aż do kolejnej granicy czyli 960.

    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },            
        960:{
            items:5
        },
        1200:{
            items:6
        }
    }

Pora na kolejne parametry.

Pierwszy z nich deklaruje, że elementy mają się znajdować w pętli. W efekcie jeżeli mamy 3 zdjęcia a dla szerokości pokazuje się 5 – dwa zostaną powielone.

    loop:true,

Ten warunek dodaje nam nawigację do karuzeli

     nav:true,

Teraz określamy przerwę pomiędzy slidami.

     margin:10,

Inne pokazy będzie się budować analogicznie. Pracując z Owl Carousel warto jest przejże również przykładowe realizacje na stronie:

https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html
Instalacja: https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html