2

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

dionajie
  • 404
  • 1
  • 7
  • 19
  • I had the same issue time ago, and was because I changed CSS in the items, especially positions and display. Try changing to defaults. – Víctor Sep 08 '15 at 15:59
  • i didn't change anything. i got from this link http://owlgraphic.com/owlcarousel/demos/itemsCustom.html – dionajie Sep 08 '15 at 16:19
  • [FIXED] my items in div which it didn't active (im using tab panel). http://stackoverflow.com/questions/27006239/owl-carousel-image-not-right-size-at-first?rq=1 – dionajie Sep 08 '15 at 16:29

1 Answers1

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
            }
        }
      });
    });
Roman Yarovoy
  • 21
  • 1