滑动 Owl 轮播控件
Slide the Owl Carousel Controls
我正在我的站点中使用 owl 旋转木马滑块。
在滑块中有更多的控件(请参阅以黑色选择的图像)。
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>
我只需要在滑块中显示 5 个控件(包括活动滑块),而另一个控件需要显示滑块格式。
我是怎么做到的,帮帮我。
谢谢
这是一个有效的 jsfiddle,它使用最新版本的 Owl 和你 want/need。
http://jsfiddle.net/zu1hvhua/3/
有了这个 CSS 我将控件居中并隐藏溢出:
.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 更改了点的左边距,因此活动的始终在视图中。看起来更复杂,我不得不处理异常(接近尾声)。
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;
的小型视图 window。
在它后面,我让 .owl-dots
拥有 100% 的设备屏幕宽度。在更改幻灯片时,我使用 left
更改点容器的位置,以确保活动点始终位于中间,除非我们位于第一张或最后两张幻灯片。
试试下面的代码:-
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);
}
}
}
同样在top中添加这些函数并更改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');
}
我正在我的站点中使用 owl 旋转木马滑块。
在滑块中有更多的控件(请参阅以黑色选择的图像)。
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>
我只需要在滑块中显示 5 个控件(包括活动滑块),而另一个控件需要显示滑块格式。
我是怎么做到的,帮帮我。
谢谢
这是一个有效的 jsfiddle,它使用最新版本的 Owl 和你 want/need。
http://jsfiddle.net/zu1hvhua/3/
有了这个 CSS 我将控件居中并隐藏溢出:
.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 更改了点的左边距,因此活动的始终在视图中。看起来更复杂,我不得不处理异常(接近尾声)。
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;
的小型视图 window。
在它后面,我让 .owl-dots
拥有 100% 的设备屏幕宽度。在更改幻灯片时,我使用 left
更改点容器的位置,以确保活动点始终位于中间,除非我们位于第一张或最后两张幻灯片。
试试下面的代码:-
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);
}
}
}
同样在top中添加这些函数并更改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');
}