API: swap naturalSlideWidth and naturalSlideHeight for ratio

Why would you specify two parameters that boil down to a single number anyway? It’s a confusing redundancy.

Sure, it can help cut a line of code when using the library, but react docs mention that

We recommend naming props from the component’s own point of view rather than the context in which it is being used.

and it makes sense to me.

So if the CarouselProvider component doesn’t care about the values, and only cares about the ratio between the values, let’s call the prop ratio and deprecate naturalSlideWidth / naturalSlideHeight.

[asherccohen]

I’d like to add another use case that I feel is relevant to this discussion. I’m building a slider with picture elements which I use for art-direction. This means that the aspect ratio changes depending on the viewport size. Of course, it’s possible to change naturalWidth/Height at the same breakpoints but that would probably be a bit cumbersome to implement and I’m not sure if there’s even a general approach that would work for all of the many things you can do with the picture element. Also, it always feels a little iffy to mix styling with logic although I realize that’s always particularly challenging with carousels. Ideally, I feel like the picture element should be a “first-class citizen” that’s supported by a modern carousel. Again, I understand that that’s probably quite challenging in reality.

Of course, this discussion also extends to the general case where the slides change aspect ratio depending on the viewport - especially when the slides contain content other than images. One common example, I’d imagine, is a testimonial slider. While you’d probably want each testimonial/slide to be the same height to avoid a janky/jumpy layout, you might want to change the aspect ratio on smaller screens due to the text being taller.

This is exactly my case, a testimonials with image and text underneath, the text generally has dynamic height. What do you suggest in this case?

[EmilEriksen]

I’d like to add another use case that I feel is relevant to this discussion. I’m building a slider with picture elements which I use for art-direction. This means that the aspect ratio changes depending on the viewport size. Of course, it’s possible to change naturalWidth/Height at the same breakpoints but that would probably be a bit cumbersome to implement and I’m not sure if there’s even a general approach that would work for all of the many things you can do with the picture element. Also, it always feels a little iffy to mix styling with logic although I realize that’s always particularly challenging with carousels. Ideally, I feel like the picture element should be a “first-class citizen” that’s supported by a modern carousel. Again, I understand that that’s probably quite challenging in reality.

Of course, this discussion also extends to the general case where the slides change aspect ratio depending on the viewport - especially when the slides contain content other than images. One common example, I’d imagine, is a testimonial slider. While you’d probably want each testimonial/slide to be the same height to avoid a janky/jumpy layout, you might want to change the aspect ratio on smaller screens due to the text being taller.