Question

我愿意在Jquery的帮助下滑动猫头鹰轮播。这是我的代码，请帮我纠正它。

    $('#slide-next').click(function() {
        $('#slider').trigger('owl.next');
    });
    $('#slide-prev').click(function() {
       $('#slider').trigger('owl.prev');
    });

Answer 1

正确的事件是：next.owl.carousel and prev.owl.carousel。

$("#slider").owlCarousel();
$('#slide-next').click(function() {
    $('#slider').trigger('next.owl.carousel');
});
$('#slide-prev').click(function() {
    $('#slider').trigger('prev.owl.carousel');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  
<button id="slide-next">Next</button>
<button id="slide-prev">Prev</button>
<div id="slider" class="owl-carousel">
  <div> Your Content1 </div>
  <div> Your Content2 </div>
  <div> Your Content3 </div>
  <div> Your Content4 </div>
  <div> Your Content5 </div>
  <div> Your Content6 </div>
  <div> Your Content7 </div>
</div>

jQuery滑动下一个和上一个猫头鹰转盘

1 个答案: