rCarousel

Daha önceleri buna benzer bir tane  örnek paylaşmıştık sizlere. Çalışma şekli zeka  küpüne benzeyen sırasıyla  hareket eden resim şeritleri olan ayrıca ligthbox tarzı resim inceleme özelliğine sahip bir  örnekti. Buradan bahsettiğimiz eklentiyi inceleyebilirsiniz. jQuery rCarousel uygulaması da görüntü olarak hemen hemen aynı görünse de onun kadar kullanışlı  bir yapıya sahip değil. Yine de resimlerin hareketleri biraz daha farklı her ikisinde. Bir tanesinde düzenli zeka küpü gibi resimler hareket ederken diğerinde yani rCarousel’de resimlerin değişmesi karmakarışık diyebiliriz. Web sitenizin sidebar bölümünde  sürekli hareket eden resimler olmasını istiyorsanız  eğer rCarousel tam size göre. Şimdiye kadar siteye resim eklemediğimden dolayı bana pek kullanışlı gelmiyor. Eğer resimler üzerine bir web sayfanız var ise rCarousel yeteri kadar görsellik katacaktır web sitenize.

Kullanım

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

Js dosya adresleri : 

<script type="text/javascript" src="../widget/lib/jquery-1.7.1.js"></script>
<script type="text/javascript" src="../widget/lib/jquery.ui.core.js"></script>
<script type="text/javascript" src="../widget/lib/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../widget/lib/jquery.ui.rcarousel.js"></script>

 Birinci  slayt  için örnek  Javascript kodu :  

$("#carousel1").rcarousel({
	visible: 5,
	step: 1,
	auto: {
		enabled: true,
		direction: "prev"
	}
});

 Birinci  slayt  için örnek Css kodu : 

#carousel1 {
	width: 500px;
	position: absolute;
	left: 0;
	top: 0;
}

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

Birinci  slayt  için örnek Html : 

<div id="carousels">
	<div id="carousel1">
		<img src="images/001.jpg" />
		<img src="images/002.jpg" />
		<img src="images/003.jpg" />
		<img src="images/004.jpg" />
		<img src="images/005.jpg" />
		<img src="images/006.jpg" />
		<img src="images/007.jpg" />
		<img src="images/008.jpg" />
		<img src="images/009.jpg" />
		<img src="images/010.jpg" />				
	</div>
</div>