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

Jak zrobić preloader?

5 najciekawszych pluginów menu w Javascript

6 najlepszych wtyczek do tworzenia okien Modal

Marek

Cancel Reply