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.

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.

Przykłady realizacji:

Ręczne przewijanie

Auto przewijanie slidów

Automatyczne z animacjami

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

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.

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