Membuat Slider Sederhana dengan Slick Slider

Membuat Slider Sederhana dengan Slick Slider – Hallo semuanya, jika kalian mencari judul ini pasti kalian sedang mencari cara membuat slide show pada website atau mungkin kalian sedang mencari referensi slider atau slide show gambar untuk kalian gunakan pada halaman website kalian. Jika kalian menemukan artikel ini, berarti kalian sedang beruntung, karena disini saya akan coba jelaskan cara membuat slide show pada website menggunakan salah satu plug in terbaik yang bisa kalian gunakan untuk mempercantik website kalian.

Pertama kita akan coba download file slick slider pada link berikut DOWNLOAD

Jika sudah sekarang kita hubungkan file css yang dibutuhkan

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// untuk tema default gunakan file slick-theme.css
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

Selanjutnya hubungkan file js yang dibutuhkan

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

Berikut adalah struktur dalam menggunakan slick slider dengan class yang kita buat

<div class="myslider">
  <div><img src=”image-1.jpg”/></div>
  <div><img src=”image-2.jpg”/></div>
  <div><img src=”image-3.jpg”/></div>
</div>

Selanjutnya kita gunakan baris javascript dibawah untuk mengaktifkan slick slider

$(document).ready(function(){
  $('.myslider').slick({
    setting-name: setting-value
  });
});

Kira – kira strukturnya akan seperti ini

<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

<div class="myslider">
  <div><img src=”image-1.jpg”/></div>
  <div><img src=”image-2.jpg”/></div>
  <div><img src=”image-3.jpg”/></div>
</div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
  $(document).ready(function(){
  $('.myslider').slick({
    setting-name: setting-value
  });
});

  </script>

  </body>
</html>

Baiklah teman – teman, itu tadi adalah cara mudah untuk membuat slide show sederhana menggunakan slick slider yang bias kalian gunakan pada website kalian atau bias sebagaii referensi kalian dalam mempercantik website.  Demikian artikel kali ini yang membahas tentang cara membuat slider sederhana menggunakan slick slider, semoga bermanfaat, terima kasih