Move Effect

To apply different dynamic effects during movement, we provide progress parameters. You can use the side dish moveEffectFn we provide, or use a custom method to control it.

import BearCarousel, {moveEffectFn} from "bear-react-carousel";

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

Custom Effect

import {TMoveEffectFn} from 'bear-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',
    }}
/>