BillyCarousel.js

Bir önceki yazımızda Jason Howmans  tarafından geliştirilmiş olan Tabber uygulaması  ile tab kullanımını  anlatmıştık. Bu gün yine aynı uygulama  ile slayt kullanımını  anlatacağız. Aslında bu uygulamanın  adı BillyCarousel diye geçiyor  ama iki  farklı  özellik olarak kullanılabildiği için iki başlık altında yayınlamayı daha doğru buldum kendimce. Yani bir önceki yazıda bahsettiğimiz Tabber ve bu yazıdaki billyCarousel  uygulamaları tek bir eklentiden oluşuyor. Hem slider  olarak hemde  tab olarak kullanılabiliyor.

Billy Carousel  slider eklentisinde  resimler hiç durmadan  sürekli olarak otomatik değişiyorlar. Resimler  arası geçiş yapabilmek için ileri geri butonunu  kullanabilirsiniz ayrıca sliderde  kaç tane  resim varsa  sliderin altına o kadar da nokta ekleniyor. Her bir nokta bir resme  işaret eder. Sliderde  tıkladığınız  noktanın  sıralamasına göre  resim çağırılır ve çağrılan resim kayarak ekranda görülür. Hem noktalı hemde  ileri geri butonları ile  resimler  arası geçiş yapabilirsiniz. Hangisini  sitenizde kullanacağınız size kalmış.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresleri :

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="billy.carousel.jquery.min.js" type="text/javascript"></script>

JavaScript :

	<script type="text/javascript">
		$(document).ready( function() {		
		// ----- Carousel
			$('#billy_scroller').billy({
				slidePause: 5000,
				// We need custom next/prev buttons for this example. If we used the defaults (#billy_next/#billy_prev), every carousel instance on the page would scroll when they're clicked...
				nextLink: $('#carousel_billy_next'),
				prevLink: $('#carousel_billy_prev'),
			});
		});				
	</script>

Css :

body {
	margin: 0;
	padding: 0;
	font: 16px Helvetica, Arial, sans-serif;
	background: #252529;
	color: white;
}

/* Dirty Reset */
ul, ul li {
	display: block;
	padding: 0;
	margin: 0;
	list-style-type: none;
}

a, a:link, a:active, a:visited, a:active {
	border: none;
	outline: none;
	color: white;
	text-decoration: none;
}

p { font-size: 14px; line-height: 20px; }

#container {
	display: block;
	width: 900px;
	margin: 0 auto 0;
	padding: 0 0 100px 0;
}

.subtle {
	display: block;
	float: right;
	color: #878793;
	font-size: 11px;
	padding: 20px 0;
}

h3, h2, h1 {
	color: white;
}

h3 { padding: 10px 0 0 0; }

hr {
	display: block;
	float: left;
}

/* Indicators */
ul#billy_indicators {
	width: auto;
	margin: 20px 0 0 0;
	float: right;
	display: block;
	z-index: 90;
}

	ul#billy_indicators li {
		display: block;
		width: 9px;
		height: 9px;
		float: left;
		margin: 0 5px 0 0;
	}

		ul#billy_indicators li a {
			display: block;
			width: 9px;
			height: 9px;
			background: #fff;
			opacity: 0.4;
			-moz-border-radius: 50px;
			-webkit-border-radius: 50px;
		}	

		ul#billy_indicators li.active a { opacity: 1.0; }
		ul#billy_indicators li a:hover { opacity: 0.6; }
			ul#billy_indicators li.active a:hover { opacity: 1.0; }

/* Controls */
#clicker {
	display: block;
	float: left;
	margin: 20px 0 0 0;
}

	#clicker a {
		background: transparent;
		border: 1px solid white;
		font-size: 12px;
		color: white;
		padding: 5px 10px 4px;
		margin: 0;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}

		#clicker a:hover {
			color: #252529;
			background: white;
		}

/* Carousel */
#billy_clip { 
	width: 900px; 
	position: relative; /* For IE */
	overflow: hidden;
	height: 400px;
	z-index:100;
}

ul#billy_scroller {
	width: 9999px;
	height: 400px;
	display: block;
	float: left;
	position: relative;
}

	ul#billy_scroller li {
		width: 900px;
		height: 400px;
		float: left;
		display: block;
	}

• Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

	<div id="container" >
		<div id="billy_clip">
			<ul id="billy_scroller">
				<li><img src="http://mintik.com/img1.jpg" width="900" height="400" alt="Desert"></li>
				<li><img src="http://mintik.com/img2.jpg" width="900" height="400" alt="Lady"></li>
				<li><img src="http://mintik.com/img3.jpg" width="900" height="400" alt="Wood"></li>
				<li><img src="http://mintik.com/img4.jpg" width="900" height="400" alt="Pond"></li>
				<li><img src="http://mintik.com/img5.jpg" width="900" height="400" alt="Pond"></li>
			</ul>	
		</div>

		<ul id="billy_indicators">
		</ul>

		<div id="clicker">
		<a href="#" id="carousel_billy_prev">Prev</a>
		<a href="#" id="carousel_billy_next">Next</a>
		</div>
	</div>	

	<div id="container">
		<span class="subtle">Billy Carousel v0.4  <a href="http://mintik.com/?p=13675">Mintik.com</span>
	</div>