Infinite carousel

[sayanChaterjee]

Hey @saadeghi, I’d like to contribute an infinite scrolling horizontal carousel component that pauses on hover. This can be implemented using Tailwind CSS, leveraging its utility classes for animation and hover states. Looking forward to your thoughts

[saadeghi]

Thanks for reaching out.
What's going to happen when scroll reaches the last item? Because an infinite carousel (the way JS libraries implement it) manipulates the DOM, adds a copy of first node at the end (or moves the DOM nodes to the end) so it will look like an infinite stack of items.

[sayanChaterjee]

we can probably do this by animating items from right to left with a continuous keyframes animation. Once an item set scrolls off-screen, we can duplicate the previous items and make them fill the space left by the previous items, creating a seamless loop. And even though we are duplicating the items, the width of the visible area will not increase because the container will clip the content that goes outside it. Looking forward to your suggestions @saadeghi .

[saadeghi]

I'm not sure how can we duplicate an element using CSS.

[sayanChaterjee]

@saadeghi I came up with a solution. First we will take some items, then we will use position absolute to remove our items from the normal flow of the document. doing so resulted in all of our items stacking up on top of one another. Then what we do is we position all of our items to the right outside of the wrapper. Now we will create our animation that will move the items to the left and we will loop it infinitely. currently all of our items are animating at the same time, stacked on top of each other and moving at the same time. Here's when we will give each items a different animation delay. We could add a fade effect too at the end of both sides. Hoping for suggestions

[saadeghi]

It doesn't sound practical but if can make it work, I would be happy to add it to daisyUI.
We don't want an animation for a specific number of items with specific size, components should be general purpose and they should work with any number of items with different sizes.

[sayanChaterjee]

sure, I will share the code along with a demo of the solution

[sayanChaterjee]

demo.mp4

I have added the CSS code. The slider and slider class is applicable for different number of items and different sizes. I hope maybe this could help. Looking towards your suggestions @saadeghi .