Pada kesempatan kali ini kita akan membuat slider.
Apakah itu???
Tentunya kita pernah melihat dalam sebuah website ada banner yang bisa bergerak ke kiri ke kanan atau sebaliknya.
Dilengkapi dengan navigasi di kiri dan kanan sebagai penanda ke slide yang sebelumnya atau yang selanjutnya.
Nah, pernah lihat kan???
Jadi itulah slider.
Maka dari itu pada tutorial ini, kita akan membuat slider.
Kita akan membuat slider menggunakan Slick Slider.
Slick Slider adalah salah satu framework dari JQuery yang sudah siap untuk dipakai.
Jadi kita akan dipermudah untuk membuat slide dengan bantuan Slick Slider ini.
Oke langsung aja ya, kita mulai.
- Download file-file pendukung Slick Slider disini (https://kenwheeler.github.io/slick/). Klik pada menu “get it now”.
2. Klik Download, setelah itu extract filenya. Maka akan ada folder “slick-1.8.1”.
3. Buka folder tersebut, lalu ada folder “slick”.
4. Dalam folder “slick”, ada file-file pendukungnya. Oke lalu copykan folder ini ke dalam folder project website yang akan kita buat.
5. Ketikkan script HTML berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Slick</title>
</head>
<body>
</body>
</html>
6. Panggil file pendukung JQuery. Disini kita menggunakan JQuery versi 1.11.0. Kita menggunakannya secara online.
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
7. Kita buat CSS tambahan untuk mendukung “Slick”. Langkah ini tidak terlalu wajib diikuti.
<style>
body
{
background-color: dodgerblue;
}
.selik
{
width: 50%;
margin: auto;
}
.selik img
{
width: 70%;
display: block;
margin: auto;
}
</style>
8. Panggil file-file pendukung dari folder “slick”.
//file css
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
//file js
<script src="slick/slick.min.js"></script>
9. Lalu siapkan gambar yang akan dijadikan objek slide banner, kemudian masukkan ke dalam folder project.
10. Buat script kode HTML untuk menggerakkan foto-foto slide.
<div class="selik">
<div>
<img src="Chrysanthemum.jpg">
</div>
<div>
<img src="Desert.jpg">
</div>
<div>
<img src="Jellyfish.jpg">
</div>
</div>
11. Selanjutnya kita buat script jQuery-nya.
<script>
$(document).ready(function()
{
$('.selik').slick();
});
</script>
12. Beginilah script kode keseluruhan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Slick</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<style>
body
{
background-color: dodgerblue;
}
.selik
{
width: 50%;
margin: auto;
}
.selik img
{
width: 70%;
display: block;
margin: auto;
}
</style>
</head>
<body>
<div class="selik">
<div>
<img src="Chrysanthemum.jpg">
</div>
<div>
<img src="Desert.jpg">
</div>
<div>
<img src="Jellyfish.jpg">
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="slick/slick.min.js"></script>
<script>
$(document).ready(function()
{
$('.selik').slick();
});
</script>
</body>
</html>
13. Maka beginilah hasil akhirnya.
Nah, kira-kira begitulah caranya.
Selamat mencoba dan semoga bermanfaat ya…