Comments (7)
Great job @zetareticoli!
Here are my questions and comments on the implementation:
- 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. - 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.
- 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 haveposition: absolute
instead. This would allow the dots to be positioned relative to the carousel instead of the root document element. - 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.
[data-slides]
elements havescroll-snap-padding
applied. The correct property name should bescroll-padding
. I tried fixing the property name and it breaks the carousel scroll.
I hope you find them useful. Thanks a lot!
from cssui.
here's some more inspo https://css-tricks.com/css-only-carousel/
from cssui.
Consider this example https://codepen.io/t_afif/pen/NWvQewg
from cssui.
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?
from cssui.
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 🙏
from cssui.
Great job @zetareticoli!
Here are my questions and comments on the implementation:
- 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).
- 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?
- 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 haveposition: 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...
from cssui.
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 🤔
from cssui.
Related Issues (20)
- Modal: Missing focus trap HOT 4
- Tabs: can't navigate to the next tab using the keyboard HOT 4
- Accordion: focus on closed panel child element HOT 4
- DEVOPS: Configure prettier and stylelint
- Test component templates accessible via direct URL HOT 1
- Sass/SCSS component files HOT 1
- Documentation for contributors HOT 1
- Tabs: Missing accessibility features HOT 4
- [Component] Progress bar HOT 1
- [Component] Datalist HOT 1
- Scroll Position on a page
- Provide CDN link HOT 1
- Prevent text selection on Accordion headings / labels HOT 2
- [Documentation] [Bug] h2 headings too big
- [Component] Range Slider
- Accordion item label keyboard focus not visualized on FF and Safari HOT 4
- Download Link not functioning HOT 5
- Modal doesn't close when the escape key is pressed HOT 2
- [Component] Fullpage Slider HOT 1
- Accordion: no focus feedback on the expanded element HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cssui.