slidercycle2

Cycle 2

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn

pada sesi sekarang saya akan bahas tentang Cycle 2 slideshow.  adalah Plugin untuk  J-query untuk membuat Slider slideshow tanpa basa – basi saya buat satu contoh yang sederhana untuk membuat Cycle2.

  • html
<html>
<head>
	<title>cycle 2</title>
</head>
<body>
<div class="slider-wrapper">
	<div id="cycle-slideshow">
		<img src="images/1.jpg">
		<img src="images/2.jpg">										
	</div>
		<a href="#" id="slide-next" class="slider-nav prev"></a><br>
		<a href="#" id="slide-prev" class="slider-nav next"></a>
</div>

</body>
</html>

pada html diatas terdapat ID cycle-slideshow fungsinya untuk pemanggilan id nanti di  javascriptnya dan didalam id cycle-slideshow terdapat tag <img> yang mendeklarasikan ada 2 image yang nantinya akan di slideshow.

kemudian untuk tag <a href > yang terdapat diluar div id cycle-slideshow itu untuk mengontrol dari slideshownya berupa next-prev.

  • Css
<style type="text/css">
		.slider-wrapper{
			position: relative;
			width: 300px;
			margin: 0 auto;
		}
		.slider-nav{
			width:35px;
			height:35px;
			display:block;
			position:absolute;
			top:0;
			margin-top:180px;
		}
		.prev{
			background-image: url("images/arrow-hover.png");
			float:left;
			position:absolute;
			left:0;
			z-index: 1000;
		}
		.prev:hover{
			background-image: url("images/prev-hover.png");
			float:left;
			position:absolute;
			left:0;
		}
		.next{
			background-image: url("images/arrow-next.png");

			position:absolute;
			right:0;
			z-index: 1000;
		}
		.next:hover{
			background-image: url("images/next-hover.png");
			position:absolute;
			right:0;
		}
	</style>

selanjutnya tambahkan javascript berikut

  • Javascript
<script type="text/javascript">
	$(document).ready(function(){
		$('#cycle-slideshow').cycle({
			fx: 'fade',
			speed: 800,
			timeout: 3000,
			next:'#slide-next', 
			prev:'#slide-prev'
		});

	});
</script>

Javascript diatas  mengatur  untuk jenis slideshow yang digunakan, kecepatan slideshow dan lainnya lengkapnya kalian bisa pelajari dari websitenya disini

selamat mencoba dan semoga bermanfaat !

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn
About Ihsan atkia

Ihsan Atkia adalah seorang Front-end Developer yang merambah sebagai UI/UX Web Designer, kecintaannya terhadap dunia Desain muncul semasa sekolah menengah atas (SMA), dengan bergabung di komunitas desain, kemudian melanjutkan di salah satu perguruan tinggi negeri di kota Bandung mengambil jurusan Teknik Informatika, aktif di salah satu club yang bernama Ruang Grafis dan menjadi pengurus club tersebut. dan sampai sekarang masih berkecimpung didunia Web Design khususnya bidang Front-end Developer dan UI/UX Web Designer.