Membuat Slider Gambar dengan Flexslider

Flexslider adalah jquery slider yang sangat mantap dan mudah di pakai yang dikembangkan oleh WooThemes yang juga pendevelop tema tema wordpress. Silahkan kunjungi webnya di http://www.woothemes.com/flexslider/

gambar1

 

Mari kita buat slider menggunakan flexslider. Pertama tama slilahkan download flexslider di http://www.bluenotesentertainment.com/siteelements/iweb-demos/flex/flex.zip

Jikalau anda sudah mempunyai flexslider yang sudah di download, langkah selanjutnya

  1. Buat lah folder dengan nama slider saya
  2. Didalam folder tersebut buat lah 3 folder dengan nama css, images dan js. Pasti anda tahu kegunaan folder tersebut :D.
  3. Copikan file jquery.flexslider.js yang sudah anda download dan paste pada folder js, jangan lupa masukan juga file jquery.js yang bisa di download di http://jquery.com/download/
  4. Copikan flexslider.css yang sudah anda download dan paste kan didalam folder css
  5. Masukan gambar yang anda inginkan dalam folder images (contoh 3 gambar ajalah)
  6. Copikan folder font yang sudah di download dan pastekan didalam folder slider saya
  7. Buatlah file dengan nama index.html
  8. Maka kurang lebih susunan folder dan file akan seperti ini

gambar2

Edit file index.html menjadi seperti code dibawah ini

<html>
	<head>
		<title>slider with flexslider | Madelhaq</title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.flexslider.js"></script>
		<link href="css/flexslider.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript">
			$(window).load(function(){
				$('.flexslider').flexslider({
					animation:"fade",
					slideshowSpeed: 100000000,
					ControlsContainer:".flex-container"
				});
			});
		</script>
		<style>
			#wrapper{
				width:400px;
				height:400px;
				margin:0 auto;
				border:1px dashed black;
				padding:5px;
			}
		</style>

	</head>
	<body>
		<div id="wrapper">
			<div class="flexslider">
				<ul class="slides">
					<li><img src="images/1.jpg" /></li>
					<li><img src="images/2.jpg" /></li>
					<li><img src="images/3.png" /></li>
				</ul>
			</div>
		</div>
	</body>

</html>

Save file tersebut, dan jalankan pada webbrowser yang ada pada computer anda

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s