responsive curved carousel

[radin]

 i want to create a carousel with 10 slides and need to be curved like attached image. it shouldn't be loop carousel. thank for help

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Rodrigo]

Hi @radin and welcome to the GSAP Forums!

 

Maybe these resources can help you getting started:

https://3dtransforms.desandro.com/carousel

 

See the Pen eYEXmJm by GreenSock (@GreenSock) on CodePen.

 

See the Pen bGKaMbo by GreenSock (@GreenSock) on CodePen.

 

See the Pen BabLjzN by GreenSock (@GreenSock) on CodePen.

 

Happy Tweening!

[radin]

look at this https://stackblitz.com/edit/stackblitz-starters-si3gbb, this should be like image and prevent draggable on first & last slide

[radin]

thank you, but that examples is sliding on scroll, i dont want a full height of body carousel, like attached image be a part of my screen

[Rodrigo]

Hi,

 

Mostly this is about the bounds in Draggable:

https://gsap.com/docs/v3/Plugins/Draggable/#bounds

 

In that aspect the minimumMovement property does not have a lot of effect in this case.

 

Also we recommend using our useGSAP hook when working in react environments:

https://gsap.com/resources/React

 

In order to use the Inertia Plugin on Stackblitz you have to install the GSAP Trial package:

https://www.npmjs.com/package/gsap-trial

 

Finally here is a fork of your demo:

https://stackblitz.com/edit/stackblitz-starters-rxsmpr?file=app%2Fpage.tsx

 

Hopefully this helps.

Happy Tweening!

[radin]

on initial render, it likes this image. this should be stick to left and be curved & show center slide ( 4 or 5) and use can navigate to left or right until first or last slide

[Rodrigo]

Just set the initial rotation of the Draggable target element to a specific value and update the Draggable instance using the update method:

https://gsap.com/docs/v3/Plugins/Draggable/update()

 

useGSAP(() => {
  const d = Draggable.create('.carousel', {
    type: 'rotation',
    bounds: {
      maxRotation: 0,
      minRotation: -(9 * (slides.length - 1)),
    },
    inertia: true,
    snap: (end) => gsap.utils.snap(9, end),
  });
  gsap.set(".carousel", { rotation: -45 });
  d[0].update();
});

Hopefully this helps

Happy Tweening!

[radin]

its solved,  thanks a lot bro❤️

[radin]

How can I reduce the distance between the cards?

[Rodrigo]

10 minutes ago, radin said:

How can I reduce the distance between the cards?

With a different angle as explained here:

https://3dtransforms.desandro.com/carousel

 

Happy Tweening!

[radin]

How can I make this infinite loop with just 10 slides?

[Cassie]

Hi there!

 

This thread started off by stating
 

Quote

"it shouldn't be loop carousel." 

So the solution suggested reflects that. If you want your carousel to loop infinitely, you'll have to construct a very different bit of logic, looping carousels are quite fiddly, luckily we have a helper function here that does the hard work for you!

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

I would suggest starting off with the draggable version and carefully working to add the styles you need. Keep it in a vanilla JS setup until you're happy with the result. Then when you've solved those challenges layer it back into your next.js app.

 

---- 

A simpler route could be something like this -

See the Pen bGKaMbo by GreenSock (@GreenSock) on CodePen.

 

But it's a bit of a cheat code as the elements aren't re-entering as they disappear, they're just arranged in a biiig circle, but maybe with some duplication of elements and some tweaks to sizing you could get where you want to be.

Good luck, post back here with what you've attempted if you get stuck and we'll help you out 💚

[Mohitkkl]

On 7/10/2024 at 11:23 PM, radin said:

on initial render, it likes this image. this should be stick to left and be curved & show center slide ( 4 or 5) and use can navigate to left or right until first or last slide

Could you please share code for this. I would really be thankful to you.