Cara Membuat Slider dengan Slick
Merancang slider/caousel yang menarik dan simpel pembuatannya yaitu keinginan para designer laman, dan kali ini saya akan menshare panduan bagaimana cara membuat slider dengan slick, dimana biasanya yang di bikin slider itu yaitu gambar/image nya, nah slick ini yang di bikin yaitu div atau paragraph atau tag yang lainya yang dibangun menjadi slider, ok seketika saja teman-teman dapat seketika kunjungi websitenya di http://kenwheeler.github.io/slick/ .
- Silahkan unduh file-file terlebih dahulu, kalian dapat klik tombol get it now dan klik unduh now.
- Ini yaitu Isi file-file slick yang telah di Unduh
- Double klik file bernama slick
- Copy file bernama slick.css, slick.min.js dan slick-theme.css
- Bikin folder dengan nama slick, dan pindahkan file yang tadi kita copy kedalam folder slick tersebut.
- Buka text editor kita, dan bikin 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 mesti 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 dapat simpan file tersebut dengan nama index.html. Dan kini kita lanjutkan merancang file CSSnya seperti berikut ini dan simpan file dengan nama style.css dan masukan ke pada 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 telah kita simpan file tersebut dengan format CSS. Bagi menjalankan hasilnya kalian dapat buka file htmlnya di browser sehingga hasilnya akan seperti ini dibawah ini.
demikian panduan cara membuat slider dengan slick, Silahkan kalian mencoba dan semoga bermanfaat…. keep coding… 🙂
Sumber https://kursuswebsite.org
