Bear Slide Card

Use it when you want to use a picture in the background, or place a card or customize the content

import BearCarousel, {BearSlideCard} from 'bear-react-carousel';

const numberColors = [
    {id: 1, color: 'green'},
    {id: 2, color: 'blue'},
    {id: 3, color: 'gray'},
];
const data = numberColors.map(row => {
    return {
        key: row.id,
        children: <BearSlideCard>
            <div style={{height: '100%', backgroundColor: row.color}}/>
        </BearSlideCard>
    };
});

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

Props

PropsName	Type	Required	Default	Description
style	CSS.Properties
className	string
bgUrl	string			Card background image url
bgSize	string		cover	Card background image size
children	JSX.Element			Card content
onClick	() => void			Card onclick event

Tip

If you need to carousel item onClick, please use this parameter directly instead of customizing it for internal use

But if you really need to use onClick internally, you may need to handle the bubbling event yourself to avoid triggering onClick when sliding.