Flickity How to make the carousel resize based on image size?

Question

I'm trying to achieve something similar to the graphic below.

Blue = Carousel Slides (As Images)

Green = Carousel Frame/Viewport/Container

Red = Visible Page (1440)

I have 5 images, all with the same resolution of (1024x576), and I want them to maintain their ratio while scaling up/down based on screen size.

I've spent several hours on this now and I've been unable to achieve what I want.

I DO NOT want to use some fixed height like is shown in a majority of the demos on their website, since it becomes problematic when scaling down to smaller devices.

The reason I post this question is because any time I try and use anything OTHER than a fixed height, the entire carousel collapses, even with adaptiveHeight: true, and/or setGallerySize: false.

I'm also using tailwind if that helps at all.

Any help is appreciated.

score 0 · Answer 1 · answered Dec 11 '18 at 17:43

0

Maybe you can just adjust via css only the images like this demo:

.carousel img {
  display: block;
  height: 200px;
}

https://codepen.io/desandro/pen/GgQREP

answered Dec 11 '18 at 17:43

humbertqz

13
4

score 0 · Answer 2 · answered Feb 10 '22 at 22:06

.carousel-cell {
  min-height: 100%;
  width: 100%;
}

.carousel-cell img {
  width: 100%;
}

Using min-height instead of height on the .carousel-cell style seems to help avoid interfering with Flickity's internal calculations.

Demo: https://codepen.io/chrisfritz/pen/RwjVvLV

Flickity How to make the carousel resize based on image size?

2 Answers2