Bootstrap, bir web sayfasına slider eklemek için kullanabileceğiniz bazı özellikler sunar. Öncelikle, Bootstrap’i projenize dahil etmeniz gerekmektedir.
Daha sonra, sayfanıza bir slider eklemek için aşağıdaki HTML kodunu kullanabilirsiniz:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Slider gösterilecek resimleri buraya ekleyin -->
<div class="carousel-inner">
<div class="item active">
<img src="resim1.jpg" alt="Resim 1">
</div>
<div class="item">
<img src="resim2.jpg" alt="Resim 2">
</div>
<div class="item">
<img src="resim3.jpg" alt="Resim 3">
</div>
</div>
<!-- Slider kontrollerini buraya ekleyin (önceki/sonraki butonları) -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Önceki</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Sonraki</span>
</a>
</div>
Bu kod, bir div elemanı içerisinde bir slider oluşturur. div elemanının içinde, slider’ın gösterilecek resimleri bulunan div elemanları yer alır. Her resim için bir div elemanı kullanılır ve resimleri img elemanları içinde gösterilir. Bir resmin gösterileceği div elemanına item ve active sınıflarını ekleyerek, o resmin ilk olarak gösterileceğini belirtebilirsiniz.
Daha sonra, slider kontrollerini (önceki/sonraki butonlarını) ekleyebilirsiniz. Bu butonlar, a elemanları içinde yer alır ve carousel-control ve left veya right sınıflarını içerir. Bu kontroller, kullanıcının slider’ın resimlerini gezmesini sağlar.