Migration to 4.x version

From version 0 to version 4, there have been some changes. In addition to splitting from business logic, in order to make parameters and scope clearer, you need to change them accordingly

AcroolSlideItem

Splitting into different components is to better distinguish props

v0

import {AcroolSlideItem} from '@acrool/react-carousel';

const data = infos.map(row => {
    return {
        key: row.id,
        children: <AcroolSlideItem as="card">  {/* or image **/}
            {row.name}
        </AcroolSlideItem>
    }
});

v4.x Change to

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

const data = infos.map(row => {
    return {
        key: row.id,
        children: <AcroolSlideCard>   {/* or AcroolSlideImage **/}
            {row.name}
        </AcroolSlideCard>
    }
});

As for the parameters, you can refer to AcroolSlideCard / AcroolSlideImage

PageContent

Old in AcroolSlideItem, since this should be a page, not an item

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

const data = infos.map(row => {
    return {
        key: row.id,
        pageContent: <>{row.name}</>,
        children: <AcroolSlideItem as="card">  {/* or image **/}
            {row.name}
        </AcroolSlideItem>
    }
});

Change to

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

const data = infos.map(row => {
    return {
        key: row.id,
        children: <AcroolSlideCard>   {/* or AcroolSlideImage **/}
            {row.name}
        </AcroolSlideCard>
    }
});

<AcroolCarousel
    data={data}
    isEnablePageContent
    renderPagination={(pageTotal: number) => {
        return foodImages.map(row => {
            return <CustomPage key={row.id}>{row.title}</CustomPage>;
        });
    }}
/>

If you need a reference case, you can get it from auto-play-progress

Height

This attribute should be one of the two, so I merged it into the same attribute

staticHeight -> height
aspectRatio -> height

Static Height

<AcroolCarousel
    data={data}
    staticHeight="200px"
/>

change to

<AcroolCarousel
    data={data}
    height="200px"
/>

AspectRatio

<AcroolCarousel
    data={data}
    aspectRatio={{widthRatio: 32, heightRatio: 9}}
/>

change to

<AcroolCarousel
    data={data}
    height={{widthRatio: 32, heightRatio: 9}}
/>

Status status dataset

[data-active="true"]{...}
[data-first-page="true"]{...}
[data-last-page="true"]{...}

change to

[data-active]{...}
[data-first-page]{...}
[data-last-page]{...}