4

I have flickity slider that should looks good when page loaded. But images mashup when page loaded. only after I refresh the page once or twice it’s work smooth.

You can find the website with the unexpected behaviour here: DEMO

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!

Jean-Paul
  • 19,910
  • 9
  • 62
  • 88
Adnan
  • 43
  • 1
  • 5

1 Answers1

4

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

Specifically, if you want to make absolutely sure that the images have loaded, you can use:

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

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

Additionally, you can use the lazyLoad option to make sure that images in adjacent cells are loaded. For this to work properly, make sure that there are more images in your slider than the width of the page. With that in place, everything should work fine.

DEMO

Community
  • 1
  • 1
Jean-Paul
  • 19,910
  • 9
  • 62
  • 88
  • 1
    Awesome.. Thanks this is Solved the question ! @Jean-Paul – Adnan Aug 17 '15 at 12:06
  • 1
    I have a same issue when I initialized with data-flickity attribute, and none works for me. In addition I put them all in $(document).ready(function(){ $(window).load(..)}), then it saved my life. Thanks a lot. – Houy Narun Oct 18 '21 at 04:34