1
默認情況下貓頭鷹轉盤顯示幻燈片爲了這樣,例如,如果我有3張幻燈片:反向貓頭鷹旋轉木馬上的最後一張幻燈片
[1] [2] [3] [1] [2] [3] [1] [2] [3] ...
我要實現這一點:
[1] [2] [3] [2] [1] [2] [3] [2] [1] ...
默認情況下貓頭鷹轉盤顯示幻燈片爲了這樣,例如,如果我有3張幻燈片:反向貓頭鷹旋轉木馬上的最後一張幻燈片
[1] [2] [3] [1] [2] [3] [1] [2] [3] ...
我要實現這一點:
[1] [2] [3] [2] [1] [2] [3] [2] [1] ...
你可以通過克隆物品模仿逆轉。這是在中間
[1] [2] [3] [4]
- >[1] [2] [3] [4] [3] [2]
。loop
模式。請檢查結果。這是你想要達到的目標嗎?
https://codepen.io/glebkema/pen/pEZpEP
var classCarousel = '.owl-carousel';
var selectCarousel = $(classCarousel);
/* 1. */
var i;
for (i = selectCarousel.children().length - 1; i > 1; i--) {
selectCarousel.children(':nth-of-type(' + i + ')').clone().appendTo(classCarousel);
}
/* 2. */
selectCarousel.owlCarousel({
autoplay: true,
dots: false,
items: 1,
loop: true,
});
.owl-carousel img {
height: auto;
width: 100%;
}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.carousel.min.css">
<div class="owl-carousel">
<div><img src="//placehold.it/900x300/936/fff/?text=1" alt=""></div>
<div><img src="//placehold.it/900x300/693/fff/?text=2" alt=""></div>
<div><img src="//placehold.it/900x300/369/fff/?text=3" alt=""></div>
<div><img src="//placehold.it/900x300/f63/fff/?text=4" alt=""></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2//2.0.0-beta.2.4/owl.carousel.min.js"></script>
謝謝你,是的,我一直在尋找這樣的事情。 – DigitCart