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.