Slide slider does not work until update

Question

I have a flickity slider that should look good when the page loads. But mashup images when loading the page. only after I refresh the page once or twice will its work be smooth.

Here you can find a site with unexpected behavior: DEMO

the code

<script type="text/javascript"> $('.main-gallery').flickity({ wrapAround: true, freeScroll: true }); $(window).load(function() { $('.gallery').flickity().focus(); }); </script> 

Any help would be greatly appreciated! Thanks in advance!

Answer 1

You forgot to use $(document).ready() . Read here why you should use this .

In particular, if you want to make absolutely sure that the images are uploaded, you can use:

 $(window).load(function () { $('.main-gallery').flickity({ wrapAround: true, freeScroll: true, lazyLoad: 3 }); }); 

This is because $(window).load() will only execute when the DOM and all images load.

Alternatively, you can use the lazyLoad parameter to make sure that images in neighboring cells are loaded. For proper operation, make sure that the slider has more images than the page width. In this case, everything should work fine.

Demo