jquery - 显示 owl carousel 2 或以前版本中的所有项目

Question

演示猫头鹰旋转木马 2

猫头鹰旋转木马 2 网站

我需要添加按钮“查看全部”，但它是如何制作的？

现在它只是一个轮播代码：

$('.owl-carousel').owlCarousel({
    loop: true,
    nav: true,
    items: 9,
});

Answer 1

演示

$('.owl-carousel').owlCarousel({
    loop: true,
    nav: true,
    items: 9,
});
$(".owl-nav").append('<div class="owl-show-all" style="">Show All</div>');

$("body").on("click",".owl-show-all",function(){
 alert('here comes yout show all logic');
});

Answer 2

---

更新：完成演示

---

JS：

$(".owl-show-all").click(function () {
    $("#owl-example").toggleClass("show_all");
});

CSS：

.show_all .owl-stage {
    width:980px !important;
    -webkit-transform: translate3d(0, 0px, 0px) !important;
}
.owl-stage {
    transition: 0.7s !important;
    -webkit-transition: 0.7s !important;
}
.owl-item.cloned {display: none;}