Plugin ini dapat berjalan lancar hampir di semua browser. Anda dapat mendownloadnya secara gratis Plugin jQuery s3Slider ini di (http://www.serie3.info/s3slider) dan dapat anda gunakan untuk proyek apapun bahkan yang bersifat komersial sekalipun karena plugin ini berada dibawah license Creative Commons Attribution 2.5.
Menggunakan Plugin Jquery s3Slider juga sangat mudah , Untuk mencoba plugin s3Slider Anda membutuhkan file Javascript Jquery, dan file javascript serta CSS dari s3Slider , ketiga file tersebut Anda dapatkan ketika Anda mendownloadnya.
Membuat Image Slider dengan s3Slider
Pertama yang perlu Anda lakukan adalah memanggil file CSS dari s3Slider dengan script seperti berikut :
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
Kemudian adalah memanggil jQuery library dan Javascript s3Slider , disini dalam contoh berikut menggunakan jQuery versi versi 1.8.1.
<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script
type="text/javascript" src="s3Slider.js"></script>
Setelah memanggil File CSS dan jQuery library dan Javascript s3Slider adalah menginisialisasikan s3Slider dan mengatur berapa lama gambar akan ditempilkan di halaman.
<script type="text/javascript">
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 4000
});
});
</script>
Letakan script CSS dan JS tersebut
di dalam tag <Head></Head>
Kemudian Script sederhana untuk
bagian Body HTML-nya adalaha seperti berikut
<div id="slider1">
<ul id="slider1Content">
<li class="slider1Image">
<img src="#">
<span>deskripsi gambar</span>
</li>
<li class="slider1Image">
<img src="#">
<span>deskripsi gambar</span>
</li>
<div class="clear slider1Image"></div>
</ul>
</div>
Pada bagian yabg bertanda “#”
dapat anda ganti dengan lokasi gambar yang ingin ditampilkan.
Untuk tampilan
serta ukuran gambar slidernya anda dapat mengaturnya dibagian CSS, dimana
ukuran gambar harus sesuai dengan ukuran width dan height yang ada pada class
slider1 .
#slider1 {
width: 720px; /* lebar sesuaikan dengan
ukuran gambar */
height: 300px; /* tinggi sesuaikan dengan
ukuran gambar */
position: relative;
overflow:
hidden;
}
Lihat Demo
Komentar disini ..