Bootstrap Carousel Kullanımı

nhtctn nhtctn

Bir resim slider’ ı yapmak istediğimizde Carousel eklentisini kullanabiliriz.

** Ekleyeceğiniz her bir resim .carousel-inner sınıfına sahip div içine gelmelidir.

** Her bir resim için .carousel-item isminde bir div içine resim eklemeliyiz.

** Slider ilk çalıştığında açılmasını istediğimiz slider için .active sınıfı eklenmelidir.

  <div class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item ">
        <img class="d-block w-100 " src="img/1.jpg" alt="">
      </div>

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

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

Aşağıdaki örnekte iki adet ikon ekleyerek ve gerekli ayarlar yaptıktan sonra ileri geri kullanımı aktif hale geldi.

   <div id="slider1" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100 " src="img/1.jpg" alt="">
                </div>

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

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

            <a href="#slider1" class="carousel-control-prev" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>

            <a href="#slider1" class="carousel-control-next" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>

Bu slider’ımızda kendiliğinden geçiş yapma ve istediğimiz slayda manuel geçiş yapma özelliği bulunmaktadır.


  <div id="slider2" class="carousel slide carousel-fade" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#slider2" data-slide-to="0" class="active"></li>
        <li data-target="#slider2" data-slide-to="1"></li>
        <li data-target="#slider2" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100 " src="img/1.jpg" alt="">
            <div class="carousel-caption">
                <h5>slider hedar1</h5>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, ea? </p>
            </div>
        </div>

        <div class="carousel-item">
            <img class="d-block w-100" src="img/2.jpg" alt="">
            <div class="carousel-caption">
                <h5>slider hedar2</h5>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, ea? </p>
            </div>
        </div>

        <div class="carousel-item">
            <img class="d-block w-100" src="img/3.jpg" alt="">
            <div class="carousel-caption">
                <h5>slider hedar3</h5>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, ea? </p>
            </div>
        </div>
    </div>

    <a href="#slider2" class="carousel-control-prev" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>

    <a href="#slider2" class="carousel-control-next" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

Jquery ile müdahale etmek için aşağıdaki kodu kullanabilirsiniz.

<script>
      $(function() {
    
          $('#slider3').carousel({
              interval: 2000,
              keyword: false,
              pause: false,
              wrap: false
          });
      });
    
    </script>

Yorum yazın

BENZER YAZILAR