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

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

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

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

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

示例:

 

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

具体实现代码:

HTML:

       <div class="owl-carousel">
            <div class="item"><h4>1</h4></div>
            <div class="item"><h4>2</h4></div>
            <div class="item"><h4>3</h4></div>
            <div class="item"><h4>4</h4></div>
            <div class="item"><h4>5</h4></div>
            <div class="item"><h4>6</h4></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]);//上一张
});