我使用owl carousel 2.0作为全屏滑块。示例:http://pixelbypixel.comli.com/
除了详细信息之外它运作良好:如果用户调整屏幕大小使其变大,则下一张幻灯片/图像的一部分会显示几秒钟:
有什么办法可以解决吗? 例如,此滑块不会发生此问题:http://archive.nicinabox.com/superslides/#1但在这种情况下我需要使用owl轮播。
这是我的标记:
<div class="owl-carousel-container">
<div class="owl-carousel">
<div>
<div class="img-container" style="background:url('img/home-1.jpg') no-repeat center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;"></div>
</div>
<div>
<div class="img-container" style="background:url('img/home-2.jpg') no-repeat center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;"></div>
</div>
<div>
<div class="img-container" style="background:url('img/home-3.jpg') no-repeat center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;"></div>
</div>
</div>
</div>
CSS:
.owl-carousel-container {
position: relative;
width: 100%;
height: 100% !important;
background: #00ad9d;
}
.owl-carousel-container .owl-carousel {
height: 100% !important;
opacity: 0 !important;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
transition: all 0.1s;
}
.owl-carousel-container .owl-carousel .owl-stage-outer {
height: 100% !important;
}
.owl-carousel-container .owl-carousel .owl-stage-outer .owl-stage {
height: 100% !important;
}
.owl-carousel-container .owl-carousel .owl-stage-outer .owl-stage .owl-item {
height: 100% !important;
}
.owl-carousel-container .owl-carousel .owl-stage-outer .owl-stage .owl-item > div {
width: 100%;
height: 100%;
}
.owl-carousel-container .owl-carousel .owl-stage-outer .owl-stage .owl-item .container {
height: 100%;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.owl-carousel-container .owl-carousel .owl-stage-outer .owl-stage .owl-item .container img {
width: auto;
position: absolute;
right: 15px;
/*top: 157px;*/
height: 384px;
top: 50%;
margin-top: -177px;
}
.owl-carousel-container .owl-carousel .owl-stage-outer .owl-stage .owl-item div.img-container {
width: 100%;
height: 100%;
position: absolute;
}
JS:
function owlCarousel(){
var owl = $('.owl-carousel');
$(".owl-carousel").owlCarousel({
loop:true,
nav:false,
mouseDrag:true,
touchDrag:false,
autoplay:true,
autoplayTimeout:6000,
autoplaySpeed:600,
autoplayHoverPause:false,
onInitialize : function(element){
owl.children().sort(function(){
return Math.round(Math.random()) - 0.5;
}).each(function(){
$(this).appendTo(owl);
});
},
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
}
答案 0 :(得分:3)
尝试添加此选项:
<强> responsiveRefreshRate: 10
强>
默认值为200,表示如果调整窗口大小,则会在200毫秒后响应。
示例:
$('#carousel-1').owlCarousel({
nav: true,
dots: true,
animateIn: 'zoomIn',
animateOut: 'zoomOut',
responsiveRefreshRate: 10,
navText: false,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 4
}
}
});
但如果网站增长(我认为,没有对其进行测试),您可能会遇到性能问题。