I'm using owl carousel 2.0 as a fullscreen slider. Example here: http://pixelbypixel.comli.com/
It's working well except for a detail: If the user resize the screen making it bigger, then part of the next slide/image is shown for some seconds:
Is there any way I can fix it? For example this problem doesn't happen with this slider: http://archive.nicinabox.com/superslides/#1 but I need to use owl carousel in this case.
This is my markup:
<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
}
}
});
}
Try adding this option:
responsiveRefreshRate: 10
Default is 200, which means that if you resize the window images respond after 200 miliseconds.
Example:
$('#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
}
}
});
But you can have performance issues if the site grows (I think, didn't tested it)
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments