Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Membuat Responsive Slide Show dengan JQuery. Responsive slideshow adalah cara menampilkan foto yang ingin kita tampilkan kedalam sebuah website dalam bentuk slide. Dalam tutorial kali ini, saya akan membuat slideshow gambar yang responsif terhadap berbagai platform dengan melakukan scaling up / down berdasarkan ukuran layar. Saya menggunakan ResponsiveSlides.js untuk membuat tayangan slide responsif. Ini adalah plugin jQuery yang mempermudah pekerjaan kita untuk menambahkan slider gambar dengan fluiditas.
Teman – teman dapat menggunakan baner slideshow responsif ini untuk menampilkan foto favorit teman – teman di spanduk blog, menambahkan slider portofolio atau untuk menunjukkan penjual terbaik dari toko online teman – teman sendiri. Oke Untuk lebih jelasnya saya akan memberikan contohnya.
Script di bawah ini menampilkan daftar tag gambar HTML di dalam elemen wadah slider. Referensi elemen wadah slider digunakan untuk menginisialisasi perpustakaan ResponsiveSlides.js untuk menjalankan slideshow gambar. Dalam contoh slideshow ini, saya menambahkan caption untuk setiap slide gambar
<html>
<head>
<title>Responsive Image Slide Show using jQuery</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="ResponsiveSlides/responsiveslides.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div class="responsive-slider">
<ul class="rslides" id="slider">
<li>
<img src="images/cream-shake.jpg" alt="">
<p class="caption">Chocolate Milkshake with Ice Cream</p>
</li>
<li>
<img src="images/sweets-cherries.jpg" alt="">
<p class="caption">Sweets and Cherries</p>
</li>
<li>
<img src="images/fruity-orange-ice-cream.jpg" alt="">
<p class="caption">Fruity Orange Ice Cream</p>
</li>
<li>
<img src="images/ice-cream.jpg" alt="">
<p class="caption">Ice Cream with Fruit Salad</p>
</li>
<li>
<img src="images/sweets.jpg" alt="">
<p class="caption">Arabian Sweets and Desserts</p>
</li>
</ul>
</div>
</div>
</body>
</html>
Inisialisasi ResponsiveSlidesjs untuk Memulai SlideShow
Skrip jQuery di bawah ini berfungsi untuk memanggil responsifSlides () dengan referensi id elemen wadah slider. Dengan mengaktifkan fungsi ini, plugin ResponsiveSlides diinisialisasi dengan seperangkat opsi. Dalam contoh ini, saya menetapkan beberapa opsi saat menginisialisasi ResponsiveSlides untuk menyetel slider max-width, memungkinkan navigasi berikutnya dan sebelumnya.
<script src="jquery-3.2.1.min.js"></script>
<script src="ResponsiveSlides/responsiveslides.min.js"></script>
<script>
$(function() {
$("#slider").responsiveSlides({
auto : false,
pager : false,
nav : true,
speed : 500,
namespace : "slider-callback",
maxwidth : "550px"
});
});
</script>
Dari script di atas maka akan menghasilkan output seperti di bawah ini, yang mempunyai dua tombol navigasi di kanan dan dikiri, untuk lebih jelasnya teman – teman bisa cuba praktikkan sendiri,
Oke itulah tadi pembahasan saya tentang Cara Membuat Responsive Slide Show dengan JQuery, semoga bermanfaat.