CSS Only Story Slider is a modern, responsive story-style UI component built using pure HTML and CSS without JavaScript. It is inspired by popular social media story interfaces and can be used for websites, portfolios, product showcases, tutorials, announcements, and promotional content.
The component uses CSS radio buttons and labels to control slide navigation without requiring JavaScript. Each story slide has its own content area, profile header, progress indicators, badge, icon, slide number, and navigation area.
Key Features
- Pure HTML and CSS – No JavaScript dependency.
- Responsive design – Works across desktop, tablet, and mobile screens.
- Story-style layout – Uses a 9:16 aspect ratio similar to modern social media stories.
- Multiple slides – Supports multiple story slides.
- Animated progress bars – CSS animations provide visual progress indicators.
- Clickable navigation – Users can switch between slides using the navigation areas.
- Modern UI – Includes rounded corners, gradients, glass-style elements, shadows, and smooth transitions.
- Hover pause effect – Progress animation pauses when the user hovers over the story.
- Reduced-motion support – Includes
prefers-reduced-motionfor accessibility. - No external libraries – Does not require Bootstrap, jQuery, Swiper, or other frameworks.
How It Works
The component uses hidden radio buttons to maintain the active slide state:
<input type="radio" name="story" id="slide-1" checked>
<input type="radio" name="story" id="slide-2">
<input type="radio" name="story" id="slide-3">CSS selectors then display the corresponding slide:
#slide-1:checked ~ .slides .slide-1 {
opacity: 1;
visibility: visible;
}Labels can be connected to the radio buttons to provide navigation without JavaScript:
<label for="slide-2" class="nav-right"></label>This makes the component particularly useful when you want an interactive UI while keeping the implementation lightweight.
Progress Bar Animation
The progress indicators are created using CSS:
.progress-item::after {
content: "";
position: absolute;
inset: 0;
background: #fff;
transform: scaleX(0);
transform-origin: left;
}The animation gradually expands the progress indicator:
@keyframes progress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}Responsive Design
The story container automatically adapts to smaller screens using responsive CSS. The component maintains a portrait-oriented layout while reducing spacing and typography on mobile devices.
You can easily customize:
- Story width
- Story height
- Border radius
- Background gradients
- Colors
- Typography
- Animation duration
- Number of slides
- Story content
- Icons and badges
Important Limitation
Because this implementation intentionally avoids JavaScript, the CSS animation does not automatically change the selected radio button from one slide to the next. The progress animation can run automatically, while slide selection can be controlled through CSS-based navigation.
If you require a fully automatic story carousel that changes slides every few seconds and loops continuously, JavaScript would be required.
Where You Can Use It
This CSS-only story component can be used for:
- Developer portfolios
- Product announcements
- Blog websites
- Landing pages
- Tutorials
- Course websites
- SaaS applications
- Marketing websites
- Product showcases
- News highlights
- Social-media-inspired interfaces
The component provides a lightweight alternative to larger carousel libraries when you only need a simple story-style interface.
Discussion (0)
Sign in to join the discussion
Only registered developers with verified email addresses can leave comments.
No comments yet. Be the first to start the conversation!