Membuat Image Auto Scroller Dengan jQuery

Pada Tips dan Trik kali ini kita akan mencoba Membuat Image Auto Scroller Dengan jQuery. Tips ini dapat membuat gambar bergerak scroll seperti pada scroll bar, scroll akan secara horizontal kekiri atau kekanan dengan hanya mengarahkan kursor diatas gambar. 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 id="content-list">
  <ul>
    <li><a href="image-1-link"><img src="/direktoti-image/image-1-file" /></a></li>
    <li><a href="image-2-link"><img src="/direktoti-image/image-2-file" /></a></li>
    <li><a href="image-3-link"><img src="/direktoti-image/image-3-file" /></a></li>
    <li><a href="image-4-link"><img src="/direktoti-image/image-4-file" /></a></li>

  </ul>
</div>

CSS
Masukan kode stylesheet kedalam tag head untuk memanggil file css yang sudah di download, berikut kodenya.
Code css dibawah ini untuk memberikan tampilan pada layoutnya.

<link rel="stylesheet" href="style.css">

Kemudian ketikan style css berikut untuk mempermanis tampilan box image pada kotak scroller.

<style>
		.content{
			overflow: hidden;
			height: 114px;
			position: relative;
			padding: 10px;
			background: #333;
			margin: 10px auto;
			width: 85%;
		}
		.content li{ margin: 0 4px; }
		.content li a{
			display: block;
			border: 7px solid rgba(255,255,255,.1);
		}
	</style>

Jangan lupa untuk memasukan jquery plugins kedalam tag head.

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

jQuery
Langkah terakhir tambahkan script jquery berikut untuk memanggil function pada jquery di bagian akhir code sebelum penutup tag body.

        <!-- Google CDN jQuery -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	
	<!-- script plugin -->
	<script src="jquery.mThumbnailScroller.js"></script>
	
	<script>
		(function($){
			$(window).load(function(){
				
				var loopDuration=6000;
				
				$("#content-1").mThumbnailScroller({
					callbacks:{
						onInit:function(){
							$("#content-1").mThumbnailScroller("scrollTo","right",{duration:loopDuration/2,easing:"easeInOutSmooth"});
						},
						onTotalScroll:function(){
							if($(this).data("mTS").trigger==="external"){
								$("#content-1").mThumbnailScroller("scrollTo","left",{duration:loopDuration/2,easing:"easeInOutSmooth"});
							}
						}
					}
				});
				
			});
		})(jQuery);
	</script>

Anda dapat melakukan atau merubah beberapa konfigurasi untuk variasi gerakan scroll 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 CODE

You may also like...

Leave a Reply

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