teklif alın
teklif alın
Bootstrap Slider (Carousel) Yana Kaydırma (Swipe) Nasıl Eklenir?

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>

Yayınlanma Tarihi: Eylül 2, 2020
BLOG’DA NELER VAR?
markanızı ziyaretçilerinize tanıtabileceğiniz en etkili ipuçları
  • İLETİŞİM BİLGİLERİ
  • Küçükbakkalköy Mah. ŞerifAli Cd.
    No:14 / 6 Ataşehir / İSTANBUL
  • 0850 304 13 02
  • [email protected]