2

When my page first loads, I see the elements vertically before flickity shows the slide. How can I prevent this using flickity or css?

I tried css using .gallery { height:100px; } but it still expands the div to show all elements before collapsing to the slider.

Raw Roy
  • 31
  • 4

1 Answers1

1

Set visibility on carousel-cell to hidden and after page is loaded, set it to visible.

CSS:

.carousel-cell {
  /* Add whatever CSS props you want */
  visibility: hidden;
}

.carousel-cell.pageloaded {
   visibility: visible;
}

Use javascript to add pageloaded class:

$(document).ready(function() {
  $('.carousel').flickity({
    // options
    "autoPlay": false,
    "lazyLoad": 2
  });
  $(".carousel-cell").addClass("pageloaded");
});
BArTMAN
  • 49
  • 6
  • The initial approach is good, but the visibility is still pushing the content below, making this look weird. I would recommend giving the slider itself a fixed height + overflow: hidden; during load and the add a class like pageloaded or initialized to the slider to remove the restrictions if you need to have a dynamic height. – Manuel Dec 22 '20 at 22:33