Owl Carousel width issues when first load

徘徊边缘 提交于 2020-01-03 03:46:06

问题


i'm using owl carousel. this is my script:

$("#owl-demo").owlCarousel({ 
  items : 3
});

i want the container show 3 images. But, here is the picture when first load

but when i resize the browser, although just a little bit, size of images change to actual size and setting that i want

So, the problem is images preview when i load browser for the first time. Why this is happening? i think the issues about size of my browser


回答1:


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;
}

My JS:

$(document).ready(function(){
      $('.owl-carousel').owlCarousel({
        center: true,
        loop:true,
        margin:20,
        autoWidth: true,
        responsive:{
            0:{
                items: 1,
                autoWidth: false
            },
            908:{
                items: 1,
                autoWidth: true
            },
            1236:{
                items: 3
            }
        }
      });
    });


来源:https://stackoverflow.com/questions/32461930/owl-carousel-width-issues-when-first-load

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!