Flickity images won't resize, they get cut off

Question

I'm trying to set up Flickity carousel. It's working, but my images don't re-size with smaller screen. The just get cut off.

I tried making images 100% width. Both in HTML and CSS. That made the images disappear altogether. I tried inserting the images on the HTML side and also as a background in CSS. Nothing has changed it. What am I missing? Any help much appreciated.

Here is my UPDATED HTML code. Included the flickity links I have in the head.

  <head>
     <link rel="stylesheet" href="flickity-docs/flickity.min.css" media="screen">
     <script src="flickity-docs/flickity.pkgd.min.js"></script>
    </head>



  <div class="main-carousel" data-flickity='{ "cellAlign": "left", "lazyLoad": true, "wrapAround": true, "autoPlay": true, "autoPlay": 6500}'>
          <div class="carousel-cell"><img class="carousel-cell-image" data-flickity-lazyLoad="images/photos/natchez-trace-parkway1-CROPPED.jpg" /> </div>
          <div class="carousel-cell"><img class="carousel-cell-image" data-flickity-lazyLoad="images/photos/waterskiing.jpg" /> </div>
          <div class="carousel-cell"><img class="carousel-cell-image" data-flickity-lazyLoad="images/photos/retire.jpg" /> </div>
    </div>

score 1 · Answer 1 · answered Aug 24 '19 at 11:46

1

Try this: In your first div with data-flickity object; add this attribute: "resize": true if that does not work, then declare data-flickity for each div with image and set that image to data-flickity-lazyload. See here for more examples

answered Aug 24 '19 at 11:46

Nompumelelo

929
3
17
28

Lelo, thank you for your reply. I tried what you suggested to know avail. Pics still won't resize on mobile. – Newsong80 Aug 25 '19 at 22:01

score 0 · Answer 2 · answered Mar 13 '23 at 20:49

This typically happens where there is dynamic content being loaded, like videos with different heights.

One potential solution is to reload the Flickity on page load:

function initSlider(){
const $slider = document.querySelector(`.TabsSlider-content`)
 var slider = new Flickity($slider, {
          cellAlign: "left",
          contain: false
        })

window.mySlider = slider;
}

       
window.addEventListener("load", function () {
  window.mySlider.destroy();
  initSlider();
})

Flickity images won't resize, they get cut off

2 Answers2