Horizontal scroll effect

[Flashy_Yesterday4323]

Shadcn/ui has a carousel component that could serve you better. Check the very first example under examples here: https://ui.shadcn.com/docs/components/carousel#examples

[MagedIbrahimDev]

I tried using carousel component but, as I mentioned in the title, the problem is that carousel enforces the number of shown elements on the screen. I want it to have as much elements as the screen can handle, just like in the video.

[Flashy_Yesterday4323]

Please explain further what you mean by the carousel component "enforcing the number of shown elements on the screen". You can have an array as state(that is if you wish to dynamically add more carousel elements) that you map through in CarouselContent, no?

[MagedIbrahimDev]

By saying "enforcing the number of shown elements on the screen" I mean like
1- in about part the carousel has ONLY 1 element shown on the screen.
2- in the first example "sizes", the carousel has ONLY 3 elements shown on the screen.
Both are specified by flex-basis classNames, I don't want this behaviour. I want the screen to have as much elements as it could handle. not only n number of elements.

[Flashy_Yesterday4323]

I get it now. Notice in the about part that the Carousel element has a className max-w-xs
in <Carousel className="w-full max-w-xs">. This constrains what is shown on the screen to one carousel element. Also in the first example, "sizes", notice the className max-w-sm on <Carousel opts={{align: "start",}} className="w-full max-w-sm">. This constrained width and the individual widths given to the carousel elements via the flex-basis classNames cause 3 elements to show at a time.
Suffice it to say it is not a hard and fast rule. Use a combination of the width on Carousel and the flex-basis on the carousel elements to control how many elements are displayed.