我已经构建了一个旋转木马，它可以在拖动时滚动，但希望它在每个新幻灯片释放时都能捕捉到中心。这可能吗?我在文档里找不到任何东西。
它工作时，我按下按钮，但似乎是一个问题与响应时拖动或拖动后。
const BannnerCarousel = ({ slice }) => {
const [width, setWidth] = useState(0);
const [currentSlide, setCurrentSlide] = useState(0);
const [ref, { width: slideWidth }] = useMeasure();
const carousel = useRef();
const x = useMotionValue(0);
let totalSlides = slice?.items?.length - 1;
const speed = slice?.primary?.speed || 8; // carousel auto slide speed in seconds
const handleSlideSnap = () => {
x.set(-slideWidth * currentSlide);
};
const nextSlide = useCallback(() => {
if (currentSlide === totalSlides) {
setCurrentSlide(0);
} else {
setCurrentSlide(currentSlide + 1);
}
}, [currentSlide, totalSlides]);
useEffect(() => {
const interval = setInterval(() => nextSlide(), speed * 1000);
return () => clearInterval(interval);
}, [nextSlide, speed]);
useEffect(() => {
setWidth(carousel.current.scrollWidth - carousel.current.offsetWidth);
}, []);
useEffect(() => {
handleSlideSnap();
}, [currentSlide, handleSlideSnap]);
return (
<section>
<motion.div
ref={carousel}
whileTap={{ cursor: 'grabbing' }}
className='overflow-hidden cursor-grab'
>
<motion.div
drag='x'
dragConstraints={{ right: 0, left: -width }}
style={{ x }}
onDragEnd={handleSlideSnap}
className='flex'
>
{slice.items.map((item, i) => (
<div key={i} className='relative'>
{item.image && (
<motion.div
ref={ref}
viewport={{ amount: 0.5 }}
onViewportEnter={() => setCurrentSlide(i)}
className='relative min-h-[500px] md:min-h-[600px] w-screen'
>
<Image
src={item.image.url}
alt={item.image?.alt || item?.title}
layout='fill'
objectFit='cover'
priority={i === 0 ? true : false}
/>
</motion.div>
)}
<div className='absolute inset-0 w-full min-h-[500px] bg-black/60 md:min-h-[600px] flex items-end pt-24 pb-20'>
<div className='container h-full'>
<div className='w-full h-full xl:w-1/2 flex flex-col justify-end'>
{item.title && (
<span className='block font-nunito font-extrabold text-2xl sm:text-3xl md:text-5xl text-white mb-4 uppercase leading-relaxed sm:leading-relaxed md:leading-snug text-center sm:text-start'>
<PrismicRichText field={item.title} />
</span>
)}
{item.description && (
<span className='block font-source-serif-pro text-lg sm:text-xl md:text-2xl text-white mb-8 text-center sm:text-start leading-relaxed sm:leading-relaxed md:leading-relaxed'>
<PrismicRichText field={item.description} />
</span>
)}
{item.link && (
<span className='flex justify-center sm:justify-start relative z-10'>
<PrismicLink field={item.link}>
<span className='mx-auto flex font-source-serif-pro font-semibold text-base sm:text-xl md:text-2xl button'>
<PrismicRichText field={item?.buttonText} />
</span>
</PrismicLink>
</span>
)}
</div>
</div>
</div>
</div>
))}
</motion.div>
</motion.div>
<div className='flex gap-4 justify-center my-10 w-1/2 md:w-1/3 lg:w-1/4 mx-auto'>
{slice?.items?.map((item, i) => (
<button
key={i}
aria-label={`Go to slide ${i + 1}`}
onClick={() => setCurrentSlide(i)}
style={{ width: `calc(100%/${totalSlides})` }}
className={`h-2 ${
currentSlide === i ? 'bg-secondary-100' : 'bg-gray-400'
} transition-colors`}
></button>
))}
</div>
</section>
);
};
export default BannnerCarousel;
使用这个:https://www.framer.com/docs/gestures/###dragsnaptoorigin只需更改dragEnd