Item Properties

A few of the CarouselProperties available primarily affect the carousel items themselves. Here, you can get an idea of how to use each of these properties in conjunction with your Freighter carousel.

Item Sizing

Carousel items are initially sized based on either a specified width and height, or use Freighter's default values. Without a resizing method, the width and height of an item (along with the carousel's itemSpacing property) directly define the dimensions of the carousel. Likely, though, a resizing method will be used that may change the size of the carousel items.


itemWidth

This property defines the initial width of a carousel item and uses the px unit. This value can be changed either manually or by using a resizing method. Not all resizing methods change the width of a carousel's items, but enough of them do to make mention of it.

For example, the stretch-scale resizing method scales down each carousel item so that the entire carousel can fit within its parent without overflow. Because the itemHeight and itemWidth are both scaled down at the same rate, a carousel using stretch-scale simply treats the itemHeight and itemWidth as an aspect ratio. This means that a height and width of 100 and 200, respectively, would be equivalent to a height and width of 1 and 2.

The itemWidth property is changed by more resizing methods than the itemHeight property. The philosophy behind this design choice was to respect the idea that browsers will display content vertically, and that vertical overflow is much more common than horizontal overflow.


itemHeight

This property defines the initial height of a carousel item and uses the px unit. This value can be changed either manually or by using a resizing method.

The itemHeight property is only affected by a single resizing method, that being stretch-scale. This means that if you are using a different resizing method and never manually change the height of a carousel item, the height of each item will always be equal to the initial value of itemHeight. As was mentioned above, vertical overflow is much more common than horizontal overflow, so resizing the height of items is not necessary in most cases.