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

 

7 September 2018

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 Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat