Saat ini, jika Anda yang biasa explore website-website di seluruh dunia, mungkin sudah tak asing melihat beberapa baris foto, iklan, bagian dari isi website, atau apapun itu yang bergerak dengan menarik. Yah, itulah mungkin salah satu “perbuatan” si jQuery. Seakan-akan jQuery membuat website lebih “hidup”. Betapa tidak, yang dahulu hanya melihat sesuatu yang diam, sekarang semua bisa bergerak, menghilang, terbang, bahkan berbayang.

Ok, kita kembali ke topik. Di sini kita akan mencoba membuat slider, yaitu membuat bagian element dari sebuah website bisa bergerak. Mungkin Anda berpikir tidak adil jika langsung melakukan sesuatu yang kita sendiri belum tahu dasarnya. Tapi inilah dunia IT, menurutku untuk mengetahui semua tentang IT, cukup kau ikuti perkembangan sekarang, maka kau akan tahu bagaimana asal dari apa yang kau ikuti itu.

Anda pernah membuat sebuah animasi jQuery dari suatu event? Di sini kita akan membuat sebuah animasi yang bukan dari suatu event, tapi dari setiap detik yang kita tentukan.

Sebelumnya, mari kita lihat hasil dari apa yang akan kita buat  disini : demo

Untuk diketahui, kita akan menggunakan fungsi “animate “. animate akan membuat element yang kita pilih bisa bergerak ke arah 4 mata angin dengan mengatur kecepatan (per detik) dan posisi element berhenti.

Pertama kita buat terlebih dahulu style css-nya:

/*
    Document   : style
    Created on : 22 Nov 11, 12:49:41
    Author     : kaze
    Description: slider
*/

body
{
    font-family: sans-serif;
    font-size: 12px;
    color: #5DA951;
}

/* awal slide photo */
#contentslider
{
    position: relative;
    left: 2px;
    margin: 0 auto;
    width: 880px;
    height: 190px;
    overflow: hidden;
    background-color: #E9F3E7;

}
#slider
{
    position: absolute;
    left: 870px;
    top: 10px;
    width: 500px;
    height: 170px;
    color: #eee;
}
#photoslide
{
    text-align:left;
}

#photoslide img
{
    cursor:pointer;
    margin-top: 3px;
    margin-bottom: 3px;
    margin-right: 5px;
    background-color:#fff;
    border:1px solid #ccc;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
/* akhir slide photo */

#footer
{
    margin: 0 auto;
    width: 900px;
    height: 30px;
    padding-top: 20px;
}

#copyrigth
{
    text-align: center;
    color: #5DA951;
}

Alangkah baiknya jika kita tahu setiap kode css di atas, mungkin kita bisa bahas di artikel css untuk kedepannya 🙂

Nah, setelah ini, kita buat file html-nya, yang merupakan page yang akan kita tampilkan slider-nya. Sebelumnya, jangan lupa untuk memanggil/meng-import file css yang tadi kita buat, dan file js yang menjalankan slider yang akan kita buat.

<link rel="stylesheet" type="text/css" href="css/style.css" 
media="screen" />
<script type="text/javascript" src="jscript/jquery-1.7.js"></script>
<script type="text/javascript" src="jscript/jquery.tools.min.js">
</script>

Setelah itu, kita tuliskan script jquery sebelum tag body

<script type="text/javascript">
$(document).ready(function(){

/* awal slide photo */
function slide()
{
  // -500 = lebar slider
  // 15000 = kecepatan animasi
  $('#slider').animate({left: "-500"}, 15000, function()
  {
    // jika proses selesai, pindahkan element ke 880px dari kiri
    $("#slider").css("left", "880");
    // setting waktu untuk menjalankan fungsi slide()
    setTimeout(slide,100);
   });
}

// panggil fungsi slide() di atas
slide();

// jika maouse berada di slider, maka berhenti
$('#slider').mouseover(function()
{
   $("#slider").stop();
});

// jika mouse di luar area slider, maka bergerak
$('#slider').mouseout(function()
{
   slide();
});
/* akhir dari slide photo */

});

</script>

Jika script jquery selesai, kita buat html-nya untuk menampilkan slider

<div id="contentslider">
  <div id="slider">
     <div id="photoslide">
       <img src="css/images/kucing2.jpg" alt="" />
       <img src="css/images/ayam2.jpg" alt="" />
       <img src="css/images/burung2.jpg" alt="" />
     </div>
  </div>
</div>

Download demo slider disini : slider.zip