close
Japan_carousel

W tym wpisie pokażę Ci jak zrobić automatycznie przesuwającą się karuzelę. To rozwiązanie sprawdzi się świetnie np. w galerii lub portfolio. Zaczynajmy 🙂

Na początku pobierzmy z tej strony potrzebne pliki. Klikając na przycisk DOWNLOAD for FREE pobierzemy archiwum, z którego użyjemy trzech plików:

  • owl.carousel.min.js
  • owl.carousel.css
  • owl.theme.css

Podepnijmy te pliki do podstawowej struktury HTML:

Napiszmy teraz pomiędzy znacznikami body strukturę naszej karuzeli:

Div o klasie carousel jest kontenerem, który obejmuje całą zawartość karuzeli. Wewnątrz diva o identyfikatorze example-carousel znajdują się dwa elementy karuzeli, każdy z tą samą klasą – carousel-item. Dodając kolejne divy o tej klasie, dodajemy kolejne elementy karuzeli.

Możemy teraz dodać pomiędzy wcześniej utworzonymi znacznikami <style> nasze style CSS:

Reguły odnoszą się głównie do nakładki, która pojawia się po najechaniu na element karuzeli. Tworzą one nakładkę oraz animują elementy w jej wnętrzu. Żadna z tych reguł nie jest wymagana do poprawnego działania wtyczki owlCarousel 🙂

Możemy teraz wewnątrz znaczników <script> aktywować wtyczkę:

Na elemencie o identyfikatorze example-carousel wywołujemy funkcję owlCarousel z opcjami:

  • autoplay – przyjmuje false (brak automatycznego przewijania) lub liczbę milisekund, pomiędzy przewijaniem
  • items – przyjmuje liczbę elementów wyświetlanych w jednym czasie na ekranie (elementy są automatycznie skalowane)
  • itemsDesktopSmall – przyjmuje tablicę z dwoma elementami – pierwszy określa szerokość strony, poniżej której liczba wyświetlanych elementów ulegnie zmianie (w tym przypadku na 2)
  • itemsTablet – analogicznie jak powyżej

W tym momencie karuzela jest już gotowa 🙂

Przykład możesz zobaczyć tutaj.

Paczkę możesz pobrać tutaj.

 

 

Tags : jquerykaruzelaowlcarousel
  • Marek

    ciekawy efekt 🙂
    dzięki za poradnik.