最后一张幻灯片上的反向猫头鹰旋转木马答案

【问题标题】：Reverse Owl Carousel on last slide最后一张幻灯片上的反向猫头鹰旋转木马
【发布时间】：2016-09-23 11:33:07
【问题描述】：

默认情况下，猫头鹰轮播按这样的顺序显示幻灯片，例如，如果我有 3 张幻灯片：

[1] [2] [3] [1] [2] [3] [1] [2] [3] ...

我想实现这个：

[1] [2] [3] [2] [1] [2] [3] [2] [1] ...

【问题讨论】：

标签： javascript jquery owl-carousel

【解决方案1】：

您可以通过克隆项目来模仿反转。

克隆中间的项目：
[1] [2] [3] [4] -> [1] [2] [3] [4] [3] [2]。
以loop 模式启动Owl Carousel 2。

请检查结果。是你想要达到的吗？

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="https://via.placeholder.com/900x300/936/fff/?text=1" alt=""></div>
  <div><img src="https://via.placeholder.com/900x300/693/fff/?text=2" alt=""></div>
  <div><img src="https://via.placeholder.com/900x300/369/fff/?text=3" alt=""></div>
  <div><img src="https://via.placeholder.com/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>

【讨论】：

谢谢，是的，我一直在寻找这样的东西。