Plugin Carousel dari Slick Carousel

14/10/2019    Risman Hakim    357     Website

Plugin Carousel dari Slick Carousel - Ada banyak plugin - plugin saat ini yang bisa kita gunakan pada halaman website secara gratis dan memang banyak developer yang membagikan secara gratis pada blog - blog mereka dan adapula plugin yang berbayar. Pada pembahasan plugin kali ini saya akan bagikan plugin carousel yang bisa kita pakai secara gratis, yaitu plugin Slick Carousel.

Tentu buat teman - teman yang pernah menggunakan Bootstrap pasti sudah tahu ya, apa itu carousel ? Nah, mungkin Slick Carousel bisa menjadi alternatif lain untuk menambahkan carousel pada halaman website. Kemudian bagaimana cara instal nya, selengkapnya berikut ini.

1. Membuat file index.html

Langkah pertama, silahkan teman - teman buat file index.html, kebetulan saya menggunakan Bootstrap untuk layoutnya secara online, silahkan teman - teman bisa ketikan kode nya berikut ini.

<div class="container">
  <h2>Our  Partners</h2>
   <section class="customer-logos slider">
      <div class="slide-img"><img src="images/logo-1.jpg"></div>
      <div class="slide-img"><img src="images/logo-2.jpg"></div>
      <div class="slide-img"><img src="images/logo-3.jpg"></div>
      <div class="slide-img"><img src="images/logo-4.jpg"></div>
      <div class="slide-img"><img src="images/logo-5.jpg"></div>
      <div class="slide-img"><img src="images/logo-6.jpg"></div>
      <div class="slide-img"><img src="images/logo-7.jpg"></div>
      <div class="slide-img"><img src="images/logo-8.jpg"></div>
   </section>
</div>

Untuk gambar bisa teman - teman sesuaikan, disini saya menggunakan ukuran gambar 626x626 piksel.

2. Membuat file main.CSS

Setelah membuat layout struktur seperti diatas, langkah selanjutnya tambahkan style CSS untuk mengatur layout agar terlihat rapi.

   h2{
      text-align:center;
      padding: 20px;
   }

   .slick-slide {margin: 0px 20px;}
   .slick-slide img {width: 100%;}
   .slick-slider {
      position: relative;
      display: block;
      box-sizing: border-box;
   }
   .slick-list{
      position: relative;
      display: block;
      overflow: hidden;
      margin: 0;
      padding: 0;
   }
   .slick-list:focus {
       outline: none;
   }
   .slick-list.dragging {
       cursor: pointer;
       cursor: hand;
   }

   .slick-slider .slick-track,
   .slick-slider .slick-list {
       -webkit-transform: translate3d(0, 0, 0);
          -moz-transform: translate3d(0, 0, 0);
           -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
               transform: translate3d(0, 0, 0);
   }
   .slick-track {
      position: relative;
      top: 0;
      left: 0;
      display: block;
   }
   .slick-track:before,
   .slick-track:after {
      display: table;
      content: '';
   }
   .slick-track:after {
      clear: both;
   }
   .slick-loading .slick-track {
       visibility: hidden;
   }
   .slick-slide {
      display: none;
      float: left;
      height: 100%;
      min-height: 1px;
   }
   [dir='rtl'] .slick-slide {
      float: right;
   }
   .slick-slide img {
      display: block;
   }
   .slick-slide.slick-loading img {
      display: none;
   }
   .slick-slide.dragging img {
      pointer-events: none;
   }
   .slick-initialized .slick-slide {
      display: block;
   }
   .slick-loading .slick-slide {
      isibility: hidden;
   }
   .slick-vertical .slick-slide {
      display: block;
      height: auto;
      border: 1px solid transparent;
   }
   .slick-arrow.slick-hidden {display: none;}

3. Membuat file script.js

Langkah selanjutnya adalah menambahkan script dari js agar carousel bisa berfungsi. Silahkan teman - teman bisa kietikan kode berikut ini.

<script>
   $(document).ready(function(){
      $('.customer-logos').slick({
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 1500,
        arrows: false,
        dots: false,
        pauseOnHover: false,
        responsive: [{
            breakpoint: 768,
            settings: {
                slidesToShow: 4
            }
        }, {
            breakpoint: 520,
            settings: {
                slidesToShow: 3
            }
        }]
      });
   });
</script>

Setelah semua kode diatas telah diketikan, jangan lupa untuk diload file main.css dan js nya, dan tentunya komponen lain - lain, seperti komponen framework Bootstrap (bootstrap.min.js, bootstrap.css), library jquery dan slick.js

   <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
   <script src="script.js"></script>
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <link rel="stylesheet" href="main.css">

Jika sudah diload semua, silahkan bisa dibuka pada browser masing - masing untuk melihat hasilnya.
Semoga plugin ini bisa menjadi referensi buat teman - teman yang sedang mencari plugin carousel, semoga bermanfaat :)

Web Design, Bootstrap

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More