Prosta karuzela (ale nie tylko!) na stronę internetową z Owl Carousel

zdjęcia, photos, images

Kategoria wpisu JavaScript, jQuery, Kursy on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Osobiście z Owl Carousel korzystam już od dobrych kilku lat i jak na razie jeszcze mnie nie zawiodła.W wbrew temu co mówi nazwa Owl Carousel to dość 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.0

Auto przewijanie slidów

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

Automatyczne z animacjami

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

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.

 

Struktura html – czyli co umieszczamy w kodzie strony:

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

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

Każdy nowy obiekt – slide to

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

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 tai sam jak to co zapisaliśmy.

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

Na początek dodamy podstawowe skrypty:

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:

 

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.

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.

Ten warunek dodaje nam nawigację do karuzeli

Teraz określamy przerwę pomiędzy slidami.

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

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *