[Feature Request] Carousel component

srivatsa17 commented 11 months ago

Is your feature request related to a problem? Please describe.

I am trying to build an ecommerce website where i want to display a slideshow of images but unable to do so because there is no carousel component available yet.

Describe the solution you'd like

It would be great to have a carousel for slideshow of images/text. Ref: https://react-bootstrap.github.io/docs/components/carousel

Describe alternatives you've considered

Would be displaying a single image instead of slide show.

Screenshots or Videos

No response

DhruvParikh1 commented 10 months ago

This would be extremely convenient. I have been using react-slick while I wait for this to be added. Probably a core component to any UI library

krishnapraveen7 commented 7 months ago

Is this on roadmap?

artiphishle commented 7 months ago

Feature proposal:

swipe on mobile device
optional loop
optional pagination
optional title/text on image
next/prev arrows
keyboard navigation
slide stops on mouseover image
event callbacks
slide duration

Event callbacks also pretty standard, I e.g. would like to change theme (next-themes) on slide ;)

in a version 2 it would be nice to add multiple effects for slides 🤩 Maybe by just supporting some known plugins, there are libraries out there to integrate if this is ok policy-wise, as it would push some 3rd party libraries

and 3d carousel (not too hard, one Math.tan() calculation and a perspective 🤗 at least that's how I did it back in the days)

I need to find out how easy it is to collaborate, e.g. what kind of mobile event handlers/package us used etc.

If it's easy I might inplement it here.

Let me know anything that helps to quickly collaborate, thanks in advance, going to check it out too or start doing it standalone if not easy to integrate, as I'm a bit in a hurry on this ;)

A more general thing for every nextUI component could be (if not so already) to simply add items by mentioning a API route (or server action) as such an abstraction would tidy up client-side code a lot, but that's offtopic here, aplogies 🐱

0xc0000f commented 6 months ago

++

theteleporter commented 6 months ago

It would be nice if it was integrated with embla carousel too, it has really nice features, such as the parallax, it's really nice.

zvictor commented 5 months ago

I am in need of a carousel atm as well, but I wonder if that should be NextUI's job to include one. With so many options out there (thanks @theteleporter for the suggestion, I didn't know embla!), isn't it better to keep that as a separate concern? Honestly asking!

Maybe we should instead be discussing what external tool best fit the needs of our community. Unless I am missing the point here, of course 😊

theteleporter commented 5 months ago

I am in need of a carousel atm as well, but I wonder if that should be NextUI's job to include one. With so many options out there (thanks @theteleporter for the suggestion, I didn't know embla!), isn't it better to keep that as a separate concern? Honestly asking!

Maybe we should instead be discussing what external tool best fit the needs of our community. Unless I am missing the point here, of course 😊

You can check out Shadcn UI's Carousel, they have simplified the Embla Carousel and Integrated it with their components. I think Next UI should also follow what Shadcn are doing.

Ayan-Ali commented 4 months ago

+1

nyakaz73 commented 3 months ago

+1

hhniao commented 3 months ago

This would be extremely convenient. I have been using react-slick while I wait for this to be added. Probably a core component to any UI library

@DhruvParikh1 there have some bug with react-slick

how can you fix it ?

https://codesandbox.io

the docs label on the codesandbox

justincorporated commented 3 months ago

+1, we absolutely NEED this in the library ASAP — this seems like a must-have component that would play very well alongside the 'Testimonials Scrolling Banner' component in the Pro library

DhruvParikh1 commented 3 months ago

This would be extremely convenient. I have been using react-slick while I wait for this to be added. Probably a core component to any UI library

@DhruvParikh1 there have some bug with react-slick

how can you fix it ?

https://codesandbox.io

the docs label on the codesandbox

What and where is the bug?