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 BearCarousel, {TBearSlideItemDataList, BearSlideCard} from 'bear-react-carousel';

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

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

Static Height​

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

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

Aspect Ratio Height​

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

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

You can move the window to see