Cara Mudah Menggunakan Owl Carousel Pada Website

Efek slider merupakan efek pada sebuah website ketika gambar dalam posisi berjejeran dan bisa bergerak. Efek slider sangat penting sekali, kenapa? karena dengan efek slider ini kita bisa membuat website lebih cantik terutama pada gambar yang berjejeran. Misalkan kamu mempunyai 50 gambar dalam gambar yang berbeda pasti tidak mau gambar tersebut akan berposisi vertikal yang di taruh pada website kamu karena pengunjung akan kesusahan dan terus meng scroll halaman website kamu. Jadi, dengan kita menggunakan owl carousel nanti kita bisa membuat gambar dengan berposisi horizontal.

Owl carousel banyak di pake oleh para developer web dan tentu saja ini sangat berguna jika kita mau membangun website statis. Untuk website resmi owl carousel nya kamu bisa kunjungi pada situs owlcarousel2.github.io. Penulis akan mengajarkan kamu bagaimana cara menggunakan owl carousel ini.

TUTORIAL

  1. Pertama yang perlu kita lakukan dulu adalah kita harus buat folder dengan nama belajar-slider untuk mempermudah tutorial kita.
  2. Buat juga folder img dan simpan pada folder belajar-slider untuk menyimpan beberapa gambar. Untuk gambar nya penulis akan membagikan nya setelah akhir artikel ini.
  3. Buka teks editor kamu bisa notepad++ atau lainnya.
  4. Buat file HTML dengan nama index.html dan simpan pada folder belajar-slider tadi. Untuk kode nya bisa lihat di bawah ini :
    5. <!doctype html>
   <html>
  <head>
    <title>Cara Mudah Membuat Efek Slider Dengan Owl Carousel</title>
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css">
  </head>   
    
  <body>  
      
<!--   Buat class owl carousel-->
<div class="owl-carousel">
<!--    Buat konten nya-->
    <div class="item"><img src="img/owl1.jpg"></div>
    <div class="item"><img src="img/owl2.jpg"></div>
     <div class="item"><img src="img/owl3.jpg"></div>
    <div class="item"><img src="img/owl4.jpg"></div>
    <div class="item"><img src="img/owl5.jpg"></div> 
</div>
      
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>
    <script>
        //script untuk membuat slider carousel
  $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        
        //bagian dari responsive slider
        
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})
      </script>
  </body>
</html>

    Kita bedah beberapa kode di atas. Kita telah membuat struktur HTML dan memanggil CDN owl carousel nya pada kode :

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>

    Nah selanjutnya kita akan buat tag div pada bagian kode :

    <!--   Buat class owl carousel-->
<div class="owl-carousel">
<!--    Buat konten nya-->
    <div class="item"><img src="img/owl1.jpg"></div>
    <div class="item"><img src="img/owl2.jpg"></div>
     <div class="item"><img src="img/owl3.jpg"></div>
    <div class="item"><img src="img/owl4.jpg"></div>
    <div class="item"><img src="img/owl5.jpg"></div> 
</div>

    Karena ini adalah konten yang akan di tampilkan nanti sebagai efek slider pada website. Di dalamnya terdapat div class item yang nanti kita tampilkan gambar nya pada tag img src.

    Dan selanjutnya kita akan menggunakan script jquery agar efek slider tersebut bisa menyala. Kamu bisa lihat pada bagian kode ini :

     <script>
        //script untuk membuat slider carousel
  $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        
        //bagian dari responsive slider
        
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})
 </script>

    Yang perlu di ingat saja kita harus di awali membuat pada script jquery :

    $('.owl-carousel').owlCarousel({})

    Karena hal tersebut harus memanggil class owl-carousel pada tag div tadi dan membuat responsif yang di mana misalkan kamu mempunyai 5 gambar yang berbeda dalam layar mode mobile, gambar yang nanti di tampilkan hanya 1 gambar saja mengenai pada kode :

    responsive:{
       
       //bagian dari responsive slider
       
       0:{
           items:1
       },
       600:{
           items:3
       },
       1000:{
           items:5
       }
}

    Contoh gambar yang hanya akan muncul ketika berada dalam layar mode mobile :

  5. Sebagai hasil lengkap nya yang telah penulis buka pada file index.html yang berada pada folder belajar-slider maka akan seperti gambar di bawah ini :
  6. Selesai. Nah, di atas adalah hasil lengkap nya dan untuk gambar , kode lengkap nya, beserta juga video nya kamu bisa kunjungi pada repositori github belajar-slider.

AKHIR KATA

Dengan menggunakan owl carousel kita bisa mudah membuat efek slider pada sebuah website karena yang penulis bilang tadi hal ini sangat penting sekali jika kamu ingin membuat website statis yang cantik. Semoga bermanfaat!