Cara Membuat Background Slideshow dengan Jquery

Membuat background slideshow dengan jQuery – Model website yang sedang manjadi tren saat ini adalah yang menggunakan gambar besar, baik itu untuk header maupun untuk background. Apa lagi jika gambar tersebut diberi efek slideshow, yang akan berganti-ganti sesuai dengan durasi waktu yang ditentukan.

Konten halaman website yang diberi efek background slideshow akan terlihat lebih mewah dan indah dipandang mata.

Kita bisa membuat website seperti itu dengan mudah menggunakan plugin jQuery, terdapat banyak plugin jQuery yang bisa digunakan untuk hal tersebut, namun pada kesempatan kali ini kita akan coba membuat slideshow gambar background dengan bantuan jQuery Backstretch.

Plugin ini akan membuat gambar memenuhi selector nya, bisa ditaruh di body, div, atau pada tag html lainnya.

Area konten HTML

Pertama kita akan membuat halaman bodi website, yang berisi berbagai macam hal, baik judul, paragraph dan lainnnya. Taruh kode ini di dalam tag body.

<div class="jw-slideshow">

<h1>Jurnalweb.com</h1>		
<p>Background Slideshow dengan Jquery</p>
<p>Pembuatan Slideshow gambar background dengan bantuan plugin jQuery.</p>
<p>Plugin Backstretch akan membuat gambar background memenuhi ukuran lebar layar</p>
<p>Image credit: Picjombo.com</p>
</div>

Memanggil plugin jQuery background slider

Script dibawah ini akan memanggil method yang ada plugin Backstretch dengan mengirimkan daftar gambar yang akan ditampilkan di dalam slideshow. Selain itu script ini juga akan mengontrol kecepatan slider dan interval waktu pergantian slideshow. Taruh kode ini dibagian akhir tag body, atau sebelum /body.

	<script src="//code.jquery.com/jquery-1.10.2.js"></script>
	<script src="jquery.backstretch.min.js"></script>
	<script type="text/javascript">
		$.backstretch(
		[
			"background1.jpg",
			"background2.jpg",
			"background3.jpg"
		], 
		{
			duration: 1200, 
			fade: 600
		});
	</script>

Jika dijalankan maka tampilannya akan terlihat tiga buah gambar background yang akan silih berganti setiap beberapa saat.

Demo | Download

Selamat mencoba :)