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
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://aurainweb.pl/wp-content/uploads/2018/03/office-6-150x150.jpg"></div> <div><img src="https://aurainweb.pl/wp-content/uploads/2018/03/office-7-150x150.jpg"></div> <div><img src="https://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
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.