CODEWITHSUNDEEP
jqueryflickity
Trent Smith
Trent Smith

Reputation: 43

Flickity slider doesn't work until refresh

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!

Upvotes: 4

Views: 6623

Answers (1)

Jean-Paul
Jean-Paul

Reputation: 21170

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

Upvotes: 4

Related Questions