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.