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

时间:2018-09-02 20:30:18

标签: jquery bootstrap-4 frontend owl-carousel

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

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

1 个答案:

答案 0 :(得分:0)

正确的事件是: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>