0

我为我的 Owl Carousel 创建了一些自定义点，但我无法让它们成为可点击的。我试过下面的代码，从另一篇文章借来的，但这只会让所有的点在点击时都变成数字 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]);
    });
    
});
4

1 回答 1

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>

于 2021-05-24T11:47:05.523 回答