Membuat slider/caousel yang menarik dan simpel pembuatannya adalah keinginan para designer website, dan kali ini saya akan menshare tutorial bagaimana cara membuat slider dengan slick, dimana biasanya yang di buat slider itu adalah gambar/image nya, nah slick ini yang di buat adalah div atau paragraph atau tag yang lainya yang dibuat menjadi slider, ok langsung saja teman-teman bisa langsung kunjungi websitenya di http://kenwheeler.github.io/slick/ .
- Silahkan download file-file terlebih dahulu, kalian bisa klik tombol get it now dan klik download now.
- Ini adalah Isi file-file slick yang telah di Download
- Double klik file bernama slick
- Copy file bernama slick.css, slick.min.js dan slick-theme.css
- Buat folder dengan nama slick, dan pindahkan file yang tadi kita copy kedalam folder slick tersebut.
- Buka text editor kita, dan buat struktur html seperti dibawah ini. dan beri nama file dengan nama index.html.
Index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Slick</title> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> <link rel="stylesheet" href="style.css"> </head> <body style="background: #ccc"> <div class="your-class"> <div class="merah">Merah</div> <div class="biru">Biru</div> <div class="kuning">Kuning</div> </div> </body> </html>
Dibawah div terakhir kalian harus tambahkan script javascript seperti berikut ini.
<script src=”https://code.jquery.com/jquery-3.2.1.min.js”></script>
<script type=”text/javascript” src=”slick/slick.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘.your-class’).slick({
infinite: true,
slidesToShow: 2,
slidesToScroll: 2
});
});
</script>
Setelah itu kalian bisa simpan file tersebut dengan nama index.html. Dan sekarang kita lanjutkan membuat file CSSnya seperti berikut ini dan simpan file dengan nama style.css dan masukan ke dalam folder css jangan lupa.
style.css
.your-class{
width: 600px;
margin: auto;
}
.merah{
background: #e74c3c; width: 600px; margin: 0 10px;height: 400px;color: #fff;font-size: 50px;text-align: center;
}
.biru{
background: #2980b9; width: 600px; margin: 0 10px;height: 400px;color: #fff;font-size: 50px;text-align: center;
}
.kuning{
background: #f1c40f; width: 600px; margin: 0 10px;height: 400px;color: #fff;font-size: 50px;text-align: center;
}
Setelah sudah kita simpan file tersebut dengan format CSS. Untuk menjalankan hasilnya kalian bisa buka file htmlnya pada browser sehingga hasilnya akan seperti ini dibawah ini.
sekian tutorial cara membuat slider dengan slick, Silahkan kalian mencoba dan semoga bermanfaat…. keep coding… 
The post Cara Membuat Slider dengan Slick appeared first on Kursus Website Terbaik.