显示owl carousel 2或prev version中的所有项目

Question

DEMO Owl Carousel 2

Owl Carousel 2 website

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

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

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

Answer 1

<强> DEMO

$('.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

---

更新：FINISHED DEMO

---

<强> 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;}