我在网站上使用猫头鹰轮播滑块。
在滑块中有更多控件(请参阅以黑色选择的图像)。
代码:
$("#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>
我只需要在滑块(包括活动滑块)中显示5个控件,而另一个控件则需要显示滑块格式。
我如何实现的,请帮助我。
谢谢
尝试以下代码:-
afterMove:function(elem){
var length = len = this.owl.owlItems.length;
var current_owl_id = "owl-demo";
if(length > 5) {
var current_item_position = this.owl.currentItem;
var current_item = 1 + current_item_position;
var slide_row = Math.ceil(current_item/4);
var slide_row_start = ((slide_row * 4) - 4);
if( slide_row_start == current_item_position) {
var before_position = current_item_position - 1;
var val = check_before_postion_css(current_owl_id, before_position);
if( val == "none") {
slide_row = slide_row - 1;
}
}
var slide_row_start = ((slide_row * 4) - 4);
if( current_item != length) {
slide_row_start = (slide_row_start <= 0) ? 0 :slide_row_start;
scroll_slide(current_owl_id, slide_row_start, 5, length, current_item);
}
}
}
还要在顶部添加以下功能并更改id名称:
function scroll_slide(id, start, end, length, current_item) {
$("#"+id +" .owl-controls .owl-pagination .owl-page").css('display', 'none');
if(start > 0) {
start = parseInt(current_item / 4) * 4;
}
start = (start - parseInt(current_item / 4));
start = (start <= 0) ? 0 : start;
for(var i = 0; i < end; i++ ) {
$("#"+id +" .owl-controls .owl-pagination .owl-page:eq("+ start +")").css('display', 'inline-block');
start++;
}
}
function check_before_postion_css(id, position) {
return $("#"+id +" .owl-controls .owl-pagination .owl-page:eq("+ position +")").css('display');
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句