Ali @mintik
15 Eylül 2020 0:22

rCarousel

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>

 

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla