Acrool Slide Card

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

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

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

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

Props

PropsName	Type	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.

Props​

Props