BLOG

Web sitesi tasarlarken önemli araçlardan biri olan bootstrap kütüphanesini sıkça kullanırız.Artık otomasyon haline gelen web tasarım sektöründe olmazsa olmaz komplike bir sistem olduğu için tercih edilmektedir.

Bootstrap ile hem zamandan kazanırız, hem de yaptığımız siteler responsive (mobil uyumlu) olmaktadır.Her yönden işimizi gören bootstrap kütüphanesinin bazı eksikleri bulunmaktadır.Bunları da ekstra eklentilerle çözebiliyoruz.Bu eksiklerin en önemlilerinden biri olan slider (carousel) eklentisinin fare imleci ile tutup yana kaydırılamamasıdır.Mobil kısmında da bu sıkıntı olan bootstrap slider’a nasıl yana kaydırma ekleneceğini yazımız içinde bulabilirsiniz.

Öncelikle

</head>

tagımızın üstüne jquery kütüphanemizi ekliyoruz.

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>

Daha sonra jquery fonksiyonumuzu çağırıyoruz.

<script>

$(document).ready(function () {
  
  $(".kaydir").carousel({
    interval: false,
    pause: true,
    touch: true,
  });

  $(".kaydir .carousel-inner").swipe({
    swipeLeft: function (event, direction, distance, duration, fingerCount) {
      this.parent().carousel("next");
    },
    swipeRight: function () {
      this.parent().carousel("prev");
    },
    threshold: 0,
    tap: function (event, target) {
      window.location = $(this).find(".carousel-item.active a").attr("href");
    },
    excludedElements: "label, button, input, select, textarea, .noSwipe,a"
  });
  $(".kaydir .carousel-control-prev").on("click", function () {
    $(".kaydir").carousel("prev");
  });
  $(".kaydir .carousel-control-next").on("click", function () {
    $(".kaydir").carousel("next");
  });
});
</script>

Son olarak bootstrap slider kodlarımızı ekliyoruz;

<div id="sliderfirst" class="carousel slide kaydir" data-ride="carousel" data-interval="3000">
<ol class="carousel-indicators">
 	<li class="active" data-target="#sliderfirst" data-slide-to="0"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active"><img src="slider.png" alt="" /></div>
</div>
</div>