Bootstrap 4 Carousel Nedir , Slider Nasıl Yapılır ?

Bootstrap 4 Carousel Nedir ?

Bootstrap 4 carousel nedir : java script desteği ile oluşturulmuş, web sitelerinde kullanılan basit bir slayt ( slider ) gösteridir. Slayt gösterilerinizde resim yada video kullanmanıza imkan tanımaktadır. Ayrıca bu  görsellerin üzerine istediğiniz bileşeni eklemeniz ( yazı ve buton gibi ) mümkündür.

Not: Responsive bir sayfa yapmak istiyorsanız burada eklediğiniz görsellerin boyutlarını ayarlamanız gerekiyor yani hepsinin aynı boyutta olaması gerekmektedir yoksa sorun yaşayabilirsiniz. Bunun için de Photoshop gibi resim düzenleme programlarını kullanmanız gerekmektedir.

Bir çok farklı carousel türü bulunmaktadır fakat bootstrap ‘ın carousel slider ‘i en çok tercih edilenlerden biridir. Zaten bootstrap kütüphanesi ücretsiz ve responsive görüntülenen aygıta göre boyut değiştirebilme özelliği olmasından dolayı bu carousel tercih etmektedir. Yazımızda bootstrap’ın bu bileşeninin sitenizde nasıl kullanılacağından kısaca bahsedeceğiz.

Bootstrap 4 Slider Nasıl Yapılır ?

Bootstrap nedir nasıl kullanılır adlı bir önceki yazımızda da anlattığımız gibi öncelikle bu kütüphanenin sitemize tanıtılması gerekmektedir. Eğer kütüphaneyi sitenize eklemeyi bilmiyorsanız bir önceki yazımıza bakabilirsiniz. Bootstrap 4 Slider bileşenini sitemize eklemek için önce bootstrap corousel sayfasına gidiyoruz. Buradaki kodlar sayesinde istediğimiz tarz bir slayt gösterisi hazırlamamız mümkün olacaktır. Örneklerle anlatacak olursak .

Sadece slayt geçişi olan kullanıcıların geçişlere müdahale etmediği, yani ileri geri slaytları değiştirmelerini istemiyorsanız aşağıdaki kodları kullanabilirsiniz.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">  "" Bu bölüme  resim ekleniyor ""
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="..."> "" Bu bölüme  resim ekleniyor ""
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="..."> "" Bu bölüme  resim ekleniyor ""
</div>
</div>
</div>

Sitenize eklemeniz yeterli olacaktır burada img etiketlerinde src bölününe resimlerinizin yolunu eklemeniz yeterli olacaktır. Geçiş süresini belirlemek isterseniz  en üst bölümde bulunan div tablosunun icerisine data-interval=”” özelliğini ekleyip icerisine milisaniye cinsinden geçiş süresini yazmanız gerekmektedir.

 

Bu slayt gösterisinde ileri ve geri butonları olsun isterseniz son kapatılan div etiketi üzerine aşağıdaki kodları eklemeniz yeterli olacaktır.

<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

 

Slaty geçişlerinizin kayarak geçmesi yerine solarak bir sonraki slatyın açılması istiyorsanız. en üst bölüme carousel-fade özelliğini eklemeniz gerekiyor. Örneği aşağıda

<div id=”carouselExampleFade” class=”carousel slide carousel-fade” data-ride=”carousel”>

Resim yada Video slaytlarınız üzerine bilgilendirme yazıları eklemeyi düşünüyorsanız ise hangi resme eklemek istiyorsanız o resmin altına h1, h2, h3, h4, h5 gibi yazı boyutları yada P gibi  paragraf yazısı ekleme imkanı bulunmaktadır.

<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">

<h5>Bir başlık ekleyebilirsiniz</h5>
<p>Bir paragraf yazısı yazbilirsiniz</p>

</div>

Bootstrap 4 carousel slider a alternatif bir slider çalışması yapmak isterseniz Owl Carousel 2 nedir başlıklı yazımızı inceleyebilirsiniz.

Daha fazla bilgi ve diğer bootstrap bileşenlerini öğrenmek için web sitesini ziyaret edebilirsiniz.