Bootstrap İle Carousel (Slider) Eklemek

Bootstrap İle Carousel (Slider) Eklemek

Bootstrap ile carousel özelliğini nasıl kullanabileceğimizi anlatalım. Carousel Bootstrap ile gelen bir eklentidir (plugin).  Birden fazla elementi belli bir düzende kullanıcıya göstermeyi sağlar.

Eklentiyi kullanmak için carousel.js dosyasını tek olarak ya da bootstrap.js dosyasını tümüyle projeye dahil etmelisiniz. Ayrıca Internet Explorer 9 ve daha önceki sürümler için bu özelliği kullanamıyoruz. CSS3 ile birlikte gelen transition (geçiş) ve animation (animasyon) özellikleri bu tarayıcılar tarafından desteklenmemektedir.

Bir örnek uygulama yapalım ve daha sonra kullandığımız yapıları açıklayalım.

En dışta bulunan div elementi için:

  • Carousel düzgün şekilde kullanımı için id değeri kullanır. Burada myCarousel olarak verildi. Farklı bir değer atanabilir.
  • Sınıf olarak carousel atandı. div elementinin carousel içerdiğini belirtmiş olduk.
  • slide sınıfı CSS transition ve animasyon efektlerini ekler. Her yeni elementin geçişinde bu sınıfın özellikleri kullanılır. Eğer efekt kullanılmasını istemiyorsanız dahil etmeyebilirsiniz.
  • data-ride=”carousel” özelliği ile sayfa yüklendiği anda animasyona başlanmasını belirtiyoruz.

ol ile başlayan liste:

  • Carousel içerisinde kaç elementin bulunduğuna göre sayısı değişen ve hangi elementin şu anda gösterildiğini belirten kısımdır. Carousel’in alt bölümünde noktalar halinde gösterilirler.
  • Düzenli liste <ol> ile tanımlanır. carousel-indicators sınıfı atanır.
  • data-target özelliği hangi carousel kullanılıyorsa onun id değerini alır.
  • data-slide-to özelliği aşağıda noktalar halinde gösterilen bölümde hangi noktaya hangi slaytın atanacağını belirler.

carousel-inner sınıfına sahip div:

  • Resim veya yazılar bu bölümde carousel-inner sınıfıyla birlikte div elementi içerisinde belirtilir.
  • Her slayt içeriği item sınıfıyla tanımlanır. Bir yazı veya resim olabilir.
  • Bu slaytlar içerisinden bir tanesi active sınıfıyla tanımlanmalıdır. Aksi taktirde carousel sayfada görünmez.

etiketi ile başlayan kontroller bölümü:

  • Kullanıcıya slaytlar arasında manuel geçiş yapabilme fırsatını verir.
  • data-slide özelliği prev ve next değerlerini alarak bir önceki veya bir sonraki slayta geçmeyi sağlar.

Resimlere Yazı Eklemek

Resimleri item sınıfıyla tanımladığımızı belirttik. Yazıları ise her biri için carousel-caption sınıfını ekleyerek kullanabiliriz.

Yukarıdaki örnekte olduğu gibi her element için aynı işlem uygulanabilir.

 

bootstrap ile slider eklemek

 

 

 

Bir Yorum

  1. Aygün

Yorum Yazın

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

error: