How to trigger a drag by clicking next/previous buttons #569

berkaycirak · 2022-12-29T00:27:55Z

berkaycirak
Dec 29, 2022

https://codesandbox.io/s/3d-carousel-b42oss?file=/src/Carousel.js
Hello, I am trying to make a 3D Carousel. It is draggable right now actually but I want users are able to skip the slider via next/previous buttons. How can I activate drag by clicking those buttons? Any idea? Actually, I have tried to change slider by clicking those arrows via gsap but when position is changed via gsap, then I drag. In that case, carousel is stuck since positions are conflict. I want to make a fluent carousel both using arrows and also drag and drop options.



function NFTCarousel({ gap = 3 }) {
	const carouselRef = useRef();
	const { size, viewport } = useThree();
	const aspect = size.width / viewport.width;
	const [spring, set] = useSpring(() => ({
		position: [0, 0, 0],
		config: { friction: 40, tension: 100 },
	}));
	const bind = useGesture(
		{
			onDrag: ({ offset: [x] }) => {
				set.start({ position: [x / aspect, 0, 0] });
			},
		},
		{ drag: { rubberband: 2 } }
	);

	return (
		<group>
			<a.group {...spring} {...bind()} ref={carouselRef}>
				{mockArray.map((card, index) => (
					<SingleCardModel
						key={index}
						position={[index * gap, 0, 0]}
					/>
				))}
			</a.group>
			{/* HTML */}
			<Html className='absolute -bottom-[20rem] left-[10rem] '>
				<h1 className='flex justify-between  w-[1000px] '>
					<FaArrowLeft
						className='text-white text-4xl transition hover:cursor-pointer hover:text-red-300 '
						onClick={() => {
							gsap.to(carouselRef.current.position, {
								x: carouselRef.current.position.x + 2,
								duration: 1.5,
								ease: 'power2',
							});
						}}
					/>
					<FaArrowRight
						className='text-white text-4xl transition hover:cursor-pointer hover:text-red-300 '
						onClick={() =>
							gsap.to(carouselRef.current.position, {
								x: carouselRef.current.position.x - 2,
								duration: 1.5,
								ease: 'power2',
							})
						}
					/>
				</h1>
			</Html>
		</group>
	);
}

export default NFTCarousel;
`

dbismut · 2022-12-29T04:05:45Z

dbismut
Dec 29, 2022
Maintainer

You don't want to trigger a drag when clicking those buttons. You want to trigger a displacement of the carousel.

7 replies

berkaycirak Dec 29, 2022
Author

I want both drag option and next/prev button option. How can I do those options via use-gesture and use-spring? any idea

dbismut Dec 29, 2022
Maintainer

Yes. Just animate the spring in useDrag and in next / prev buttons onClick handlers. I think you're being confused by something but I'm not sure what it is.

berkaycirak Dec 29, 2022
Author

I have make a sandbox to clear your mind about the problem. https://codesandbox.io/s/3d-carousel-b42oss?file=/src/Carousel.js you can check that. In here, I am dragging via useDrag and it uses offset. When I use buttons and then drag the carousel again the problem is occurred. Position of the group is stuck at some point. Since useDrag is using its own offset whereas click events not use that common offset. How can I fix that problem? Do you have any idea? I have been dealing with that issue for 2 days. Just test that sandbox, you will understand my problem

dbismut Dec 30, 2022
Maintainer

To be honest this is a much clearer explanation of the problem thank you.

Use the from option. It's documented. https://use-gesture.netlify.app/docs/options/#from

berkaycirak Jan 1, 2023
Author

I couldn't do it. Can you help me on the sandbox. https://codesandbox.io/s/3d-carousel-forked-gei53g?file=/src/Carousel.js. I have used from but it didn't help. In here, I am changing position of the carousel by draggin or by clicking buttons which also set the spring position again, but when I try to do drag after using button, it still takes it previous offset.

How to trigger a drag by clicking next/previous buttons #569

Uh oh!

Uh oh!

berkaycirak Dec 29, 2022

Replies: 1 comment · 7 replies

Uh oh!

dbismut Dec 29, 2022 Maintainer

Uh oh!

berkaycirak Dec 29, 2022 Author

Uh oh!

dbismut Dec 29, 2022 Maintainer

Uh oh!

Uh oh!

berkaycirak Dec 29, 2022 Author

Uh oh!

dbismut Dec 30, 2022 Maintainer

Uh oh!

Uh oh!

berkaycirak Jan 1, 2023 Author

berkaycirak
Dec 29, 2022

Replies: 1 comment 7 replies

dbismut
Dec 29, 2022
Maintainer

berkaycirak Dec 29, 2022
Author

dbismut Dec 29, 2022
Maintainer

berkaycirak Dec 29, 2022
Author

dbismut Dec 30, 2022
Maintainer

berkaycirak Jan 1, 2023
Author