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

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.

 

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,

Cara Membuat Responsive Slide Show dengan JQuery

Oke itulah tadi pembahasan saya tentang Cara Membuat Responsive Slide Show dengan JQuery, semoga bermanfaat.