问题
I am working on owl-carousel
. Currently I have a problem that my slider width is acting really bad.
When I load/refresh the website, owl-carousel
has some value in width, but a part of the next slide is visible (I want to avoid that). At the same time after the initial load when I resize the window (toggle maximize, or change the width or height by dragging) it sets the width to the correct value as I wanted. I don't understand why it's happening. I want to prevent that habit in the initial load.
Here is my jQuery.
function newsSlider() {
$('.news-slider .owl-carousel').owlCarousel({
autoplay: true,
autoplayHoverPause: true,
dots: true,
loop: true,
margin: 5,
items: 3,
responsive: {
0: {
items: 1,
},
768: {
items: 2,
},
992: {
items: 3,
}
}
});
}
回答1:
Managed Solve the issue by setting fixed width
. I know it's a bad practice. If anyone can come up with a proper way to solve this, you are welcomed. Thank you.
回答2:
I fixed this problem when I measured the width of the owl-stage container in a working state. And then set the values in the styles like:
#photo-gallery .owl-stage {
min-width: 10317px;
}
回答3:
this did the trick for me
(function ($) {
// initialize here
})(jQuery);
来源:https://stackoverflow.com/questions/52073169/having-trouble-with-owl-carousel-width-in-initial-load