Skip to main content

Height

Suggestion

It is recommended to use a static height, although the auto height is very convenient, but it will cause bad visual effects, flashing to open the layout (if you follow the image height)

Auto Height​

If your height in slide card content

import AcroolCarousel, {TAcroolSlideItemDataList, AcroolSlideCard} from '@acrool/react-carousel';

const data: TAcroolSlideItemDataList = images.map(row => {
    return <AcroolSlideCard key={row.id}>
        <div style={{height: '200px', backgroundColor: row.color}}/>
    </AcroolSlideCard>
});

<AcroolCarousel
    // ...ignore some
    data={data}
/>

Static Height​

You can use your own units like px, rem, %, vh

<AcroolCarousel
    // ...ignore some
    height="250px"
/>

Aspect Ratio Height​

If you want to set the height proportionally, you can do

<AcroolCarousel
    // ...ignore some 
    height={{ widthRatio: 21, heightRatio: 9 }}
/>

You can move the window to see