Cara Membuat Image Slider Responsive dengan Jquery - Hai, salam sejahtera buat teman-teman sekalian.Pada postingan kali ini saya akan mencoba share cara membuat image slider yang responsive dengan menggunakan jquery dan plugin-plugin yang telah tersedia. Maksudnya adalah dalam membuat slider ini, anda tidak memerlukan koding secara berlebih, jadi sudah ada sekumpulan script yang dibuat orang untuk membuat fungsi ini.
Kita akan menggunakan bantuan jquery dan plugin Cycle2. Cycle2 adalah sebuah plugin yang berguna untuk membuat slideshow yang serbaguna, tanpa melakukan scripting sekalipun, biarkan Cycle2 yang melakukan proses untuk slidenya. Nah, kita membutuhkan sedikit bahasa pemrograman css untuk tampilannya.
Ok, langsung saja kita siapkan filenya dahulu. Untuk file jquery anda dapat mendownloadnya di situsnya yaitu jquery.com dan untuk plugin Cycle2nya anda dapat mengunduhnya disini disitu sudah lengkap juga dengan keterangannya. Atau anda dapat filenya yang akan saya sertakan di blog ini nanti dan jangan lupa siapkan juga file image atau gambarnya ya. Buat file html dengan nama index.html, terlebih dahulu kita memanggil file script jquery dan plugin yang kita punya tadi. Berikut script javascriptnya.
Nah, jika sudah panggil script jquery dan pluginnya, sekarang kita panggil class-class yang akan berguna untuk pembuatan slidenya dan imagenya kita panggil juga, berikut scriptnya.
<script type="text/javascript" src="js/jQuery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle2.min.js"></script>
Nah, jika sudah panggil script jquery dan pluginnya, sekarang kita panggil class-class yang akan berguna untuk pembuatan slidenya dan imagenya kita panggil juga, berikut scriptnya.
<div class="cycle-slideshow">Sampai disini sudah bagaimana hasilnya bro.? Pasti gambarnya sudah muncul dan membentuk sebuah slide, jadi gambar yang kita punya tadi sudah berganti-ganti secara berurut. Hanya saja tampilannya yang kurang, justru itu kita membutuhkan css untuk membuat tampilannya lebih yahuuud lagi. Ok, tambahkan script cssnya dibawah ini.
<span class="cycle-prev">〈</span> <!-- Untuk membuat tanda panah di kiri slider -->
<span class="cycle-next">〉</span> <!-- Untuk membuat tanda panah di kanan slider -->
<span class="cycle-pager"></span> <!-- Untuk membuat tanda bulat atau link pada slider -->
<img src="images/1.jpg" alt="Gambar Pertama">
<img src="images/2.jpg" alt="Gambar Kedua">
<img src="images/3.jpg" alt="Gambar Ketiga">
<img src="images/4.jpg" alt="Gambar Keempat">
</div>
<style type="text/css">Nah, gimana bro.?? Hasilnya sudah bagus bukan.? Coba perkecil dan perbesar ukuran browser yang anda gunakan untuk mengecek apakah sudah responsive atau belum. Jika anda mengikutinya dari awal, maka script seluruhnya ada dibawah ini.
* { margin: 0; padding: 0; }
img { max-width: 100%; }
.cycle-slideshow {
width: 100%;
max-width: 960px;
display: block;
position: relative;
margin: 20px auto;
overflow: hidden;
}
.cycle-prev, .cycle-next {
font-size: 200%;
color: #fff;
display: block;
position: absolute;
top: 50%;
z-index: 9999;
cursor: pointer;
margin-top: -16px;
}
.cycle-prev { left: 42px; }
.cycle-next { right: 62px; }
.cycle-pager {
position: absolute;
width: 100%;
height: 10px;
bottom: 10px;
z-index: 9999;
text-align: center;
}
.cycle-pager span {
text-indent: 100%;
top: 100px;
width: 10px;
height: 10px;
display: inline-block;
border: 1px solid #fff;
border-radius: 50%;
margin: 0 10px;
white-space: nowrap;
cursor: pointer;
}
.cycle-pager-active { background-color: #fff; }
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="content">
<title>Responsive Image Slider</title>
<script type="text/javascript" src="js/jQuery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle2.min.js"></script>
<style type="text/css">
* { margin: 0; padding: 0; }
img { max-width: 100%; }
.cycle-slideshow {
width: 100%;
max-width: 960px;
display: block;
position: relative;
margin: 20px auto;
overflow: hidden;
}
.cycle-prev, .cycle-next {
font-size: 200%;
color: #fff;
display: block;
position: absolute;
top: 50%;
z-index: 9999;
cursor: pointer;
margin-top: -16px;
}
.cycle-prev { left: 42px; }
.cycle-next { right: 62px; }
.cycle-pager {
position: absolute;
width: 100%;
height: 10px;
bottom: 10px;
z-index: 9999;
text-align: center;
}
.cycle-pager span {
text-indent: 100%;
top: 100px;
width: 10px;
height: 10px;
display: inline-block;
border: 1px solid #fff;
border-radius: 50%;
margin: 0 10px;
white-space: nowrap;
cursor: pointer;
}
.cycle-pager-active { background-color: #fff; }
</style>
</head>
<body>
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span> <!-- Untuk membuat tanda panah di kiri slider -->
<span class="cycle-next">〉</span> <!-- Untuk membuat tanda panah di kanan slider -->
<span class="cycle-pager"></span> <!-- Untuk membuat tanda bulat atau link pada slider -->
<img src="images/1.jpg" alt="Gambar Pertama">
<img src="images/2.jpg" alt="Gambar Kedua">
<img src="images/3.jpg" alt="Gambar Ketiga">
<img src="images/4.jpg" alt="Gambar Keempat">
</div>
</body>
</html> Sangat sederhana bukan.? Nah begitulah cara membuatnya yang sederhana. Oke, sampai disini tutorial Cara Membuat Image Slider Responsive dengan Jquery semoga dapat bermanfaat bagi anda. Untuk melihat hasilnya, anda dapat melihat demo dibawah ini dan download juga filenya. Terima kasih, jangan lupa ya dishare.!!
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
