Plugin Carousel dari Slick Carousel

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

14 Oktober 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat