CODEWITHSUNDEEP
jquerycsscarouselowl-carousel
dionajie
dionajie

Reputation: 404

Owl Carousel width issues when first load

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

First load, before browser get resize

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

Browser got resize

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

Upvotes: 2

Views: 11556

Answers (1)

Roman Yarovoy
Roman Yarovoy

Reputation: 21

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

Upvotes: 1

Related Questions