Description
I propose adding a high-difficulty, pure CSS interactive carousel component. This component will allow developers to display a horizontal sequence of cards, images, or testimonials that users can swipe through.
The implementation will completely avoid JavaScript, relying entirely on modern CSS scroll-snap-type: x mandatory for the sliding physics. Furthermore, it will utilize a hidden radio-button hack coupled with anchor links to create functional pagination dots that smoothly scroll the carousel to specific slides.
This acts as an advanced layout addition to the EaseMotion framework, proving that complex, interactive UI patterns can be achieved without the heavy overhead of libraries like Swiper.js or Slick.
Why is this useful for EaseMotion CSS?
Carousels are notoriously difficult to implement well. Most developers immediately reach for a 50KB JavaScript library just to slide some images left and right. By providing a native, hardware-accelerated CSS solution, EaseMotion allows developers to build extremely performant, touch-friendly image galleries and testimonial sliders that natively integrate with the framework's shadow and radius tokens.
HTML Snippet
html
CSS Snippet
css
/* Carousel Wrapper */
.ease-carousel-wrapper {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
}
/* The native scroll-snap track */
.ease-carousel-track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none; /* Hide scrollbar Firefox */
gap: var(--ease-space-4);
padding-bottom: var(--ease-space-4);
}
.ease-carousel-track::-webkit-scrollbar {
display: none; /* Hide scrollbar Safari/Chrome */
}
/* Individual Slides */
.ease-carousel-slide {
flex: 0 0 100%; /* Take up full width of container */
scroll-snap-align: center; /* Snap to center */
transition: transform var(--ease-speed-medium) var(--ease-ease);
}
/* Pagination Container */
.ease-carousel-pagination {
display: flex;
justify-content: center;
gap: var(--ease-space-2);
margin-top: var(--ease-space-4);
}
/* Pagination Dots */
.ease-carousel-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--ease-color-neutral-300);
cursor: pointer;
transition: background-color var(--ease-speed-fast) var(--ease-ease),
transform var(--ease-speed-fast) var(--ease-ease);
}
/* Hidden Radios */
input[type="radio"] {
display: none;
}
/* Active Dot Styling (Via Checkbox Hack) */
#slide-1:checked ~ .ease-carousel-pagination label[for="slide-1"],
#slide-2:checked ~ .ease-carousel-pagination label[for="slide-2"],
#slide-3:checked ~ .ease-carousel-pagination label[for="slide-3"] {
background-color: var(--ease-color-primary);
transform: scale(1.3);
}
Visual Reference (optional)
N/A
Checklist
I have read the
CONTRIBUTING.md
document.
I have checked for existing issues proposing the same feature.
I understand that my proposed class names or structure may be modified by the maintainer.
Description
I propose adding a high-difficulty, pure CSS interactive carousel component. This component will allow developers to display a horizontal sequence of cards, images, or testimonials that users can swipe through.
The implementation will completely avoid JavaScript, relying entirely on modern CSS scroll-snap-type: x mandatory for the sliding physics. Furthermore, it will utilize a hidden radio-button hack coupled with anchor links to create functional pagination dots that smoothly scroll the carousel to specific slides.
This acts as an advanced layout addition to the EaseMotion framework, proving that complex, interactive UI patterns can be achieved without the heavy overhead of libraries like Swiper.js or Slick.
Why is this useful for EaseMotion CSS?
Carousels are notoriously difficult to implement well. Most developers immediately reach for a 50KB JavaScript library just to slide some images left and right. By providing a native, hardware-accelerated CSS solution, EaseMotion allows developers to build extremely performant, touch-friendly image galleries and testimonial sliders that natively integrate with the framework's shadow and radius tokens.
HTML Snippet
html
Checklist
I have read the
CONTRIBUTING.md
document.
I have checked for existing issues proposing the same feature.
I understand that my proposed class names or structure may be modified by the maintainer.