Membuat Slideshow Dengan jQuery #1

 Author : hadinug, 12 February, 2014, Komentar

Web slidehow merupakan komponen yang paling sering di pakai pada sebuah website, dan banyak sekali para developer berlomba-lomba untuk membuat slideshow yang terbaik. Bahkan secara cuma-cuma, source code yang mereka buat di berikan kepada pengunjung website mereka.


Dan saya yakin 10 dari 100 orang yang mendownload source tersebut, tidak paham dengan konsep pembuatan slideshow dimulai dari yang paling sederhana. Kebanyakan slideshow yang mereka download merupakan program yang sudah siap pakai dan cendrung script nya sangat banyak.



Berangkat dari permasalah tersebut saya mencoba menuliskan sedikit, tentang pengalaman saya dalam pembuatan script slideshow dengan jQuery.


Misal saya punya elemen list dengan jumlah 4 child dan saya ingin mereka tampil satu persatu seperti slide. Maka cukup bagi saya dengan satu baris script jquery untuk melakukan hal yang saya ingin kan tadi. Logik nya, di tahap awal semua list slide akan di hide / disembunyikan, kemudian cari slide dengan index eq(0) untuk di tampilkan pertama kali. Setelah itu cari list slide dengan index +1, dan lakukan secara berulang.


<ul id="slide">
     <li><a href="#">slide #1</a></li>
    <li style="background:yellow;"><a href="#">slide #2</a></li>
    <li><a href="#">slide #3</a></li>
    <li style="background:yellow;"><a href="#">slide #4</a></li>
</ul>

Kemudian di script jquery nya saya tambahkan script berikut:


<script type="text/javascript">
    setInterval(function() {$('#slide').find('li').hide().eq(0).hide().next('li').show().end().appendTo('#slide');},5000);
</script>



Demo   atau   Download


Sangat mudah bukan?, untuk tahap selanjut nya, kita akan belajar menambahkan even [prev] [pause] [next], pada slide yang akan kita buat. Semoga bermanfaat.


 
Bagikan halaman ke sosial media
 
Tags :   jQuery    javascript    slideshow       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda