Membuat Auto Slideshow Sederhana Dengan JQuery

Pada artikel ini akan dijelaskan bagaimana membuat slideshow yang berjalan secara otomatis dengan batuan JQuery. Untuk isi dari slideshow bisa berupa teks, gambar atau keduanya dan pada contoh ini kita hanya menggunakan teks.

Pertama tuliskan kode HTML untuk isi dari slideshownya seperti berikut


<div id="slideshow">
      <div>Isi dari slide 1</div>
      <div>Isi dari slide 2</div>
      <div>Isi dari slide 3</div>
</div> 

Buatlah style CSS

 #slideshow {
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

Terakhir buat script JQuery

$("#slideshow > div:gt(0)").hide();

setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

Untuk melihat hasil dari contoh diatas, bisa dilihat disini

Semoga bermanfaat..