A few questions about Carousel

[codayon]

I'd like to open a discussion regarding a few aspects of the DaisyUI Carousel component's behavior that I've observed. Your insights would be greatly appreciated.

1. Understanding Snap Behavior: What's the difference between Snap to start, Snap to center, and Snap to end? They all look and feel exactly the same to me right now, and none seem particularly interactive.

2. Page Jump on Interaction:: Why does the whole page jump to the top when I interact with carousels likeCarousel with indicator buttons or Carousel with next/prev buttons? Is that supposed to happen?

3. Navigation Button Movement: The navigation buttons seem to move a little when clicked. I looked at the code and saw individual buttons for each image – is that the intended setup, and is the button movement expected?

Thank you for your time and clarification on these points!

[codayon]

I think this might be the issue for being not interactive, #1587 (comment). But, there are functional carousels too e.g., Vertical carousel, Carousel with indicator buttons and Carousel with next/prev buttons.

[AnshSinghSonkhia]

I think, there is a little bit of difference not visible with eyes

[saadeghi]

@codayon hey 👋

1. When you scroll horizontally, you can see if the items are being sticking to the beginning or middle or end (For horizontal scroll, in case you're using Windows, hold Shift and use mouse scroll)
2. Yes that's expected behavior because we're using HTML anchor links and anchor links scroll to the selected element on click. So this kind of carousel are ideal for a full screen image gallery or a hero section at the top of the page, not something on bottom.
3. You mean the arrow button? We must use different buttons for each image. Because there's no JS and we can't dynamically changes the behavior of one button (to scroll to the next image each time)

Let me know if you have any questions

[codayon]

Thanks for your response!

using Windows, hold Shift and use mouse scroll

Woah, it's working fine. As someone who is used to drag to move carousel items, I never thought of this.

not something on bottom

I think, that's why I felt out of place. Then, what are we supposed to use when we want a carousel with arrow buttons but for the bottom or middle of the page? For example the design below,

You mean the arrow button? We must use different buttons for each image. Because there's no JS and we can't dynamically changes the behavior of one button (to scroll to the next image each time)

Yes. I have just got to know, daisyUI is a JavaScript-less UI component library (by asking an AI). Before knowing this, I was continuously comparing with shadcn and jQuery plugin slick and they uses JS and TS. Sorry for the inconvenience.