你如何使自定义猫头鹰轮播点可点击？答案

【问题标题】：How do you make custom Owl Carousel dots clickable?你如何使自定义猫头鹰轮播点可点击？
【发布时间】：2021-08-12 16:11:27
【问题描述】：

我为我的 Owl Carousel 创建了一些自定义点，但我无法让它们成为可点击的。我试过下面的代码，从another post借来的，但这只会让所有的点在点击时都变成数字1。

<div id="dots" class="dots">

    <div class="item active"><span>1</span></div>
    <div class="item"><span>2</span></div>
    <div class="item"><span>3</span></div>
    <div class="item"><span>4</span></div>
    <div class="item"><span>5</span></div>

</div>

<div id="owl-carousel" class="owl-carousel owl-loaded owl-drag">

  <div class="owl-stage-outer">
  <div class="owl-stage">
       
    <div class="owl-item cloned"> </div>
    <div class="owl-item active"> </div>

  </div>
  </div>
</div>


$(document).ready(function () {

    $("#owl-carousel").owlCarousel({
        items: 1,
        loop: true,
        autoplay: false,
        dots: true,
        dotsData:true,
        dotsContainer: '#dots',
        nav: true,
        dotsEach: true,
        navText: ["<img src=''>", "<img src=''>"]
    });
    
    $('#dots .item').click(function() {
          $('#dots .item').trigger('to.owl.carousel', [$(this).index(), 1000]);
    });
    
});

【问题讨论】：

标签： jquery owl-carousel owl-carousel-2

【解决方案1】：

这行得通。要使自定义点居中，只需执行以下操作：

.owl-dots {
    text-align: center
}

$('.owl-carousel').owlCarousel({
  loop: false,
  margin: 10,
  nav: false,
  dots: false,
  dotsData:true,
  dotsContainer: '.owl-dots',
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
</div>

<div class="owl-dots">
  <button role="button" class="owl-dot active"><span>1</span></button>
  <button role="button" class="owl-dot"><span>2</span></button>
  <button role="button" class="owl-dot"><span>3</span></button>
  <button role="button" class="owl-dot"><span>4</span></button>
</div>

【讨论】：