OwlCarousel自定义事件实现上一个、下一个控制()JQuery


项目中用到了OwlCarousel插件,需要实现上一页、下一页按钮,来控制幻灯片上一张、下一张滚动。

最后在这个项目中找到了解决方法:

https://gitee.com/steper/Plugin-OwlCarousel

这个项目引用的线上静态资源已不能正常访问,为此我调整了这个示例项目,静态资源全部引用本地,上传到了蓝奏云上:https://wwb.lanzouw.com/iReVAy5m6tg

示例:

通过点击next按钮,实现下一张操作。

具体实现代码:

HTML:

       <div class="owl-carousel">
            <div class="item"><h4>1h4>div>
            <div class="item"><h4>2h4>div>
            <div class="item"><h4>3h4>div>
            <div class="item"><h4>4h4>div>
            <div class="item"><h4>5h4>div>
            <div class="item"><h4>6h4>div>
        div>    
<button id="next">下一张button>
<button id="prev">上一张button>

js:

var owl = $('.owl-carousel');
owl.owlCarousel({....幻灯片参数...});
$('#next').on('click', function ()
{
    owl.trigger('next.owl.carousel', [500]);//下一张
});

$('#prev').on('click', function ()
{
    owl.trigger('prev.owl.carousel', [500]);//上一张
});