Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Membuat jQuery Parallax Slider. Dalam tutorial ini, kita akan melihat bagaimana membuat slider jQuery dengan efek animasi paralaks. Dalam contoh ini, saya telah menerapkan slider paralaks hanya dengan beberapa baris kode (kurang dari 40 baris dan hanya 3kb). Saya telah mengkodekan contoh ini dengan fungsi perpustakaan jQuery yang terkenal dan paling banyak digunakan. Mudah untuk memahami aliran kode dan menyesuaikan sesuai dengan kebutuhan kita.

Dalam contoh ini, saya telah memposisikan slide satu demi satu menggunakan fungsi init (). Gambar mini untuk slide tercantum di bawah gambar slider. Slide dan thumbnail ditambahkan dalam wadah slider. Saat mengklik gambar thumbnail ini slide yang sesuai akan ditampilkan kepada pengguna dengan mengubah posisi slide. Saat mengganti posisi slide wadah slider juga meluncur bolak-balik di tingkat dan kecepatan yang berbeda yang akan menciptakan efek paralaks.

Parallax Slider HTML

Kode berikut menunjukkan HTML untuk slider paralaks. Elemen container slider berisi gambar slider dan gambar mini. Gambar slider dan latar belakang kontainer bergerak maju mundur berdasarkan event klik thumbnail.

jQuery Script untuk Parallax Slider

Script jQuery berikut berisi fungsi untuk membuat slider paralaks. Dalam skrip ini, ia memanggil fungsi init () untuk mengatur posisi semua slide. Pada event klik gambar thumbnail, ia memanggil fungsi runSlider () yang menciptakan persepsi paralaks pada efek geser dengan mengendalikan kecepatan slider dan perpindahan latar belakang.

Oke untuk melihat hasilnya silahkan teman – teman praktikkan sendiri. oke itulah tadi pembahasan saya tentang Cara Membuat jQuery Parallax Slider Semoga bermanfaat.