Membuat Image Slidebox Dengan jQuery

Pada Tips dan Trik kali ini kita akan mencoba Membuat Image Slidebox Dengan jQuery. Tips ini dapat membuat gambar bergerak slide kekiri atau kekanan dengan otomatis maupun dengan menekan tombol navigasi slide. Kita akan menggunakan css dan jquery.

Ikuti langkah-langkah berikut.
HTML
Langkah pertama kita akan mulai dengan membuat struktur HTML-nya. Berikut kurang lebih kerangka HTML nya.

<div class="slidebox">
    <ul>
        <li>
            <div>slide 1 content</div>
        </li>
        <li>
            <div>slide 2 content</div>
        </li>
        <li>
            <div>slide 3 content</div>
        </li>
        <li>
            <div>slide 4 content</div>
        </li>
    </ul>
</div>

Gunakan kode berikut untuk mengambil gambar yang akan ditampilkan dan masukan kedalam kode html.

<li style="background:url(folder_gambar/nama_file_gambar) no-repeat;">

Sehingga kode lengkapnya menjadi seperti berikut.

<div id="slidebox_1" class="slidebox">
	<ul>
		<li style="background:url(demo_images/sb-img-1.jpg) no-repeat;">
    		<a href="#slide_1_link" title="Slide 1 title"><span>Ini slide pertama</span></a>
    	</li>
    	<li style="background:url(demo_images/sb-img-2.jpg) no-repeat;">
    		<a href="#slide_2_link" title="Slide 2 title"><span>Slide ke 2</span></a>
    	</li>
    	<li style="background:url(demo_images/sb-img-3.jpg) no-repeat;">
    		<a href="#slide_3_link" title="Slide 3 title"><span>Slide selanjutnya. Ini slide ketiga.</span></a>
    	</li>
    	<li style="background:url(demo_images/sb-img-4.jpg) no-repeat;">
    		<a href="#slide_4_link" title="Slide 4 title"><span>Beralih ke slide no 4</span></a>
    	</li>
		<li style="background:url(demo_images/sb-img-5.jpg) no-repeat;">
    		<a href="#slide_5_link" title="Slide 5 title"><span>Slide terakhir, slide kelima</span></a>
    	</li>
	</ul>
</div>

CSS
Masukan kode berikut kedalam tag head untuk memanggil file css yang sudah di download, berikut kodenya.

<link rel="stylesheet" href="jquery.mSimpleSlidebox.css">

Jangan lupa untuk memasukan library dan plugins jquery kedalam tag head.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script src="jquery.mSimpleSlidebox.js"></script>

jQuery
Langkah terakhir tambahkan script jquery berikut untuk memanggil slidebox function kedalam tag head.

<script type="text/javascript">
$(document).ready(function(){
	$("#slidebox_1").mSlidebox({
		controlsPosition:{
			buttonsPosition:"outside",
			thumbsPosition:"outside"
		}
	});
});
</script>

Anda dapat melakukan atau merubah beberapa konfigurasi untuk animasi waktu, gerakan transisinya atau perpindahanya, dll di file js yang sudah di download.

Sekian Tips dan Trik kali ini, semoga bermanfaat.
Berikut link demo dan source code lengkapnya yang bisa di download.
DEMO | DOWNLOAD SOURCE CODE

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *