Owl 幻灯片中的轮播 2 导航

Question

我正在使用 Owl Carousel 2 jquery 插件，并试图将导航按钮包含在幻灯片中。我的html很简单：

<div class="owl-carousel">    
<div>
  <p>Slide 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam rem assumenda, ullam, beatae earum animi magnam! Reiciendis, laboriosam, itaque.</p>

  <div class="customNavigation">
    <a class="prev">Previous</a>
    <a class="next">Next</a>
  </div>

</div>

<div>
  <p>Slide 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam rem assumenda, ullam, beatae earum animi magnam! Reiciendis, laboriosam, itaque.</p>

  <div class="customNavigation">
    <a class="prev">Previous</a>
    <a class="next">Next</a>
  </div>

</div>

<div>
  <p>Slide 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam rem assumenda, ullam, beatae earum animi magnam! Reiciendis, laboriosam, itaque.</p>

  <div class="customNavigation">
    <a class="prev">Previous</a>
    <a class="next">Next</a>
  </div>

</div>

然后我这样调用插件：

$(document).ready(function(){    
    $('.owl-carousel').owlCarousel({
        loop:true,
        items: 1,
    })      
});

现在我只需要获取链接即可使用该插件！非常感谢任何帮助

Answer 1

希望这对你交配有所帮助。

$('.owl-carousel').owlCarousel({
    loop: true,
    items: 1,
});
owl = $('.owl-carousel').owlCarousel();
$(".prev").click(function () {
    owl.trigger('prev.owl.carousel');
});

$(".next").click(function () {
    owl.trigger('next.owl.carousel');
});

Fiddle here

Owl 幻灯片中的轮播 2 导航

Owl Carousel 2 Navigation In Slide

jquery

owl-carousel