卡片移動效果

在移動中應用不同的動態效果，我們提供進度參數，你可以使用我們提供的配菜 moveEffectFn，或是自訂義的方法來控制

import AcroolCarousel, {moveEffectFn} from "@acrool/react-carousel";

<AcroolCarousel
    // ...ignore some
    slidesPerView={3}
    isCenteredSlides
    moveEffect={{
        moveFn: moveEffectFn.transformY(50),
        moveTime: '.3s',
    }}
/>

Custom Effect

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

const moveFn: TMoveEffectFn = (percentageInfo) => {
    const transformY = 80;
    return {
        transform: `translate(0px, ${-transformY * (percentageInfo.calcPercentage - 1)}px)`,
        opacity: percentageInfo.calcPercentage,
    };
};

<Carousel
    slidesPerView={3}
    isCenteredSlides
    moveEffect={{
        moveFn,
        moveTime: '.3s',
    }}
/>

Custom Effect​

Custom Effect