cssui

cssui copied to clipboard

Create the Carousel component using scroll-snap CSS feature.

Consider this example https://codepen.io/t_afif/pen/NWvQewg

I worked on a basic component structure and style.

Here you can find a preview: https://codepen.io/zetareticoli/pen/oNGVyOz?editors=1100

@omaxel What do you think with the result?

I've made some changes to the component:

• Added PREV/NEXT arrows
• Fixed padding bug

See the preview: https://codepen.io/zetareticoli/pen/oNGVyOz

I'll explore more the dots nav, making it with <input type="radio"> to simulate the checked state

@omaxel feedback welcome 🙏

Great job @zetareticoli!

Here are my questions and comments on the implementation:

1. Is there a particular reason for which you used :before and :after pseudo-selectors on [data-carousel] to display the previous and next button's icons? Couldn't we do the same styling the buttons using [data-slide-arrow]? A problem with the current approach is the clickable area: since :before and :after are rotated, the clickable area is different compared to the actual button. This makes it possible to implement the third point of this list too.
2. I know you are exploring more on dots nav, but I noticed that when I'm on the third slide, the first and the third dots nav are white, while the second and the fourth are black.
3. On Windows, the dots are displayed above the bottom horizontal scroll-bar. Also, I'm not sure it should have position: fixed, I would expect it to have position: absolute instead. This would allow the dots to be positioned relative to the carousel instead of the root document element.
4. On the latest and first slides, I would enforce the feedback on the disabled arrow button. As of now, they are styled like a normal state button.
5. [data-slides] elements have scroll-snap-padding applied. The correct property name should be scroll-padding. I tried fixing the property name and it breaks the carousel scroll.

I hope you find them useful. Thanks a lot!

Great job @zetareticoli!

Here are my questions and comments on the implementation:

1. Is there a particular reason for which you used :before and :after pseudo-selectors on [data-carousel] to display the previous and next button's icons? Couldn't we do the same styling the buttons using [data-slide-arrow]? A problem with the current approach is the clickable area: since :before and :after are rotated, the clickable area is different compared to the actual button. This makes it possible to implement the third point of this list too.

Yes, the reason is that using the pseudo-elements on [data-slide-arrow] they got repeated for each slide. The downside is the effect you highlighted at point 4 (no visual feedback on first/last slide).

2. I know you are exploring more on dots nav, but I noticed that when I'm on the third slide, the first and the third dots nav are white, while the second and the fourth are black.

At the moment, I added the active style using :target pseudo-class. Don't know how to deal it without (scrolling and first element active by default. Any suggestions?

3. On Windows, the dots are displayed above the bottom horizontal scroll-bar. Also, I'm not sure it should have position: fixed, I would expect it to have position: absolute instead. This would allow the dots to be positioned relative to the carousel instead of the root document element.

This is just a workaround because using absolute generates a bug where the dots appear in the first slide only. Need to investigate more...

here's some more inspo https://css-tricks.com/css-only-carousel/

Worked on another demo: https://codepen.io/zetareticoli/pen/bGYKOQR?editors=1100

It's total different approach, using radio buttons to manage sliding effect and indicators. Thus, it isn't touch sensitive for mobile devices 🤔