项目中用到了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]);//上一张 });