javascript - 滑动 Owl Carousel 控件

Question

我在我的网站中使用 Owl Carousel slider 。

在 slider 中有更多控件(请参阅以黑色选择的图像)。

CODE :

$("#owl-demo-2").owlCarousel({
  navigation : false,
  slideSpeed : 300,
  paginationSpeed : 400,
  singleItem : true,
  pagination : true,
  items : 1,
  afterMove:function(){
    var length = this.owl.owlItems.length;
    var current_item = this.owl.currentItem;
    /*- need to work here -*/
  },
  afterInit:function(){
    var length = this.owl.owlItems.length;
    var current_item = this.owl.currentItem;
    for(var i = 5; i < length; i++ ) {
      $("#owl-demo-2 .owl-controls .owl-pagination .owl-page:eq("+ i +")").css('display', 'none');
    }
  }
});

<div id="owl-demo-2" class="owl-carousel">
  <div class="item"><img src="img/product-img-1.jpg"></div>
  <div class="item"><img src="img/product-img-1.jpg"></div>
  <div class="item"><img src="img/product-img-1.jpg"></div>
  <div class="item"><img src="img/product-img-1.jpg"></div>
  <div class="item"><img src="img/product-img-1.jpg"></div>
  <div class="item"><img src="img/product-img-1.jpg"></div>
  <div class="item"><img src="img/product-img-1.jpg"></div>
  <div class="item"><img src="img/product-img-1.jpg"></div>
  <div class="item"><img src="img/product-img-1.jpg"></div>
  <div class="item"><img src="img/product-img-1.jpg"></div>
</div>

我只需要在 slider 中显示 5 个控件(包括事件 slider )，而另一个控件需要显示 slider 格式。

我是如何做到这一点的，帮帮我。

谢谢

Answer 1

这是一个工作的 jsfiddle，使用最新版本的 Owl 和你想要/需要的东西。

http://jsfiddle.net/zu1hvhua/3/

使用此 CSS，我将控件居中并 overflow hidden :

.owl-controls {
    width: 130px;
    height: 28px;
    overflow: hidden;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    display: inline-block;
    border: 4px solid black;
}
.owl-dots {
    height: 28px;
    width: 100vw;
    position: relative;
    left: 0;
    transition: left .3s ease;
}
.owl-dots .owl-dot {
    float: left;
}

并且这个 JS 改变了点的左边距，所以事件的点总是在 View 中。看起来更复杂，我必须处理异常(接近尾声)。

var owl = $('.owl-carousel');
owl.owlCarousel({
    margin: 10,
    loop: true
});
owl.on('changed.owl.carousel', function(event) {
    var activeIndex =  $('.owl-dots>.active').index(), dots = $('.owl-dots .owl-dot');
    if (activeIndex > 2) {
        if (activeIndex < (dots.length - 2)) {
            left = '-' + (24 * (activeIndex -2 )) + 'px';
        } else {
            left = '-' + (24 * (dots.length - 5 )) + 'px';
        }
    } else {
        left = '0';
    }
    $('.owl-dots').css({'left': left});
});

代码背后的原理非常简单:我将 .owl-controls 设置为带有 overflow: hidden; 的小查看窗口。

在它后面，我让 .owl-dots 拥有 100% 的设备屏幕宽度。在更改幻灯片时，我使用 left 更改点容器的位置，以确保事件点始终位于中间，除非我们位于第一张或最后两张幻灯片。