Jak zrobić karuzelę z owlCarousel

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:

<!DOCTYPE html>
<html lang="pl">

<head>
   <title>Karuzela</title>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="owl-carousel/owl.carousel.css" type="text/css">
   <link rel="stylesheet" href="owl-carousel/owl.theme.css" type="text/css">

   <style type="text/css">

   </style>
</head>

<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="owl-carousel/owl.carousel.min.js"></script>

<script>

</script>
</body>

</html>

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

<div class="carousel">

<div class="carousel-slider">
   <div class="container">
      <div id="example-carousel" class="owl-carousel">

         <div class="carousel-item">
            <img src="images/owl_slider/1.jpg" alt="">
            <div class="carousel-hover">
               <div class="carousel-hover-inner">
                  <h3>Przykładowy post</h3>
                     <p>17 września 2015</p>
               </div>
            </div>
         </div>

         <div class="carousel-item">
            <img src="images/owl_slider/2.jpg" alt="">
            <div class="carousel-hover">
               <div class="carousel-hover-inner">
                  <h3>Przykładowy post</h3>
                  <p>17 września 2015</p>
               </div>
            </div>
         </div>

      </div>
   </div>
</div>
</div>

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:

.container {
   max-width: 1200px;
   margin: 0 auto;
   clear: both;
   padding: 0 15px;
}

.carousel {
   padding: 55px 0;
   text-align: center;
}

.owl-controls {
   margin-top: 60px;
}

.carousel-item {
   width: 100%;
}

.carousel-item img {
   width: 100%;
   cursor: move;
}
    
.carousel-item:hover .carousel-hover {
   opacity: 1;
}
    
.carousel-item:hover h3 {
   transform: translateX(0%);
   transform: translateY(0%);
   transform: translateZ(0%);
}
    
.carousel-item:hover p {
   transform: translateX(0%);
   transform: translateY(0%);
   transform: translateZ(0%);
}

.carousel-hover {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   text-align: center;
   transition: 0.2s all;
   overflow: hidden;
   background-color: rgba(0, 155, 0, 0.7);
   opacity: 0;
}

.carousel-hover-inner {
   position: absolute;
   width: 100%;
   top: 50%;
   transform: translateY(-50%);
}

.carousel-hover-inner  h3 {
   font-size: 24px;
   color: #fff;
   transform: translateX(0%);
   transform: translateY(-400%);
   transform: translateZ(0%);
   transition: 0.4s all;
}
    
.carousel-hover-inner  p {
   color: #fff;
   margin-bottom: 20px;
   transform: translateX(0%);
   transform: translateY(-400%);
   transform: translateZ(0%);
   transition: 0.4s all;
}

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ę:

$(document).ready(function(){

$('#example-carousel').owlCarousel({
   autoPlay: 10000,
   items: 3,
   itemsDesktopSmall: [1199, 2],
   itemsTablet: [768, 1]
});

});

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.

Autor

Jak zrobić karuzelę z owlCarousel

Bartłomiej Mąkina

Marek

Cancel Reply

HTML

CSS

HTML

CSS

HTML

CSS

HTML

CSS

HTML

CSS

HTML

CSS

HTML

CSS

HTML

CSS

HTML

CSS

HTML

CSS

Bartłomiej Mąkina

Chat z Node.js i Socket.io | #1 – Tworzenie aplikacji

Tworzenie gry przeglądarkowej – #6 Statystyki gracza

13 efektownych wtyczek scrollujących jQuery

Marek

Cancel Reply