最后一张幻灯片上的反向猫头鹰轮播

时间:2016-09-23 11:33:08

标签: javascript jquery owl-carousel

默认情况下,owl carousel会按照这样的顺序显示幻灯片,例如,如果我有3张幻灯片:

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

我想实现这个目标:

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

1 个答案:

答案 0 :(得分:1)

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

  1. 克隆中间的项目:
    [1] [2] [3] [4] - > [1] [2] [3] [4] [3] [2]
  2. loop模式启动Owl Carousel 2
  3. 请检查结果。这是你想要实现的目标吗?

    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>
    &#13;
    &#13;
    &#13;