5-Minute Setup
1 Include Files (Add to <head>)
Required Files
2 Include JavaScript (Add before </body>)
Required JavaScript
3 Create Basic Carousel
Basic Carousel
Slide Title
Slide description...
Slide Title
Slide description...
Slide Title
Slide description...
✓ Done! Your carousel is now functional with keyboard navigation and smooth fade transitions.
Two Carousel Patterns
1. Basic Carousel (Simple Navigation)
Perfect for image galleries and product showcases with simple prev/next navigation
Code
2. Advanced Slider with Auto-Rotation & Indicators
Full-featured slideshow with numbered indicators, autoplay, and pause controls
Code
Title 1
Description...
Quick Reference
Data Attributes
| Attribute | Purpose | Values |
|---|---|---|
data-auto-rotate |
Enable automatic slide rotation | "true" |
data-interval |
Rotation interval in seconds | "3" (default), "5", etc. |
data-slide-index |
Index for slide indicator buttons | "0", "1", "2"... |
CSS Classes
| Class | Purpose |
|---|---|
.slider |
Main carousel container |
.carousel |
Slides container |
.carousel-slide |
Individual slide |
.active |
Currently visible slide/indicator |
.carousel-caption |
Caption overlay on slides |
.carousel-prev-arrow |
Previous slide button |
.carousel-next-arrow |
Next slide button |
.slider-indicators |
Container for numbered indicators |
.slider-indicator |
Individual numbered indicator |
.pause-container |
Container for pause/play buttons |
How It Works
The Carousel Mechanism:
- First slide is marked with
.activeclass on page load - JavaScript listens for prev/next arrow clicks and indicator clicks
- Active slide fades out while next slide fades in using CSS transitions
- Indicators update to show current slide position
- If
data-auto-rotate="true", slides advance automatically - Pause/play buttons stop and resume auto-rotation
- Keyboard users can navigate with Tab and Enter keys
⚠ Important: Always mark the first slide with
class="carousel-slide active" and the first indicator with class="slider-indicator active" for proper initialization.
Pro Tips
✨ Tip 1: Use
data-interval="5" for longer intervals—give users time to read captions
✨ Tip 2: Add
.slider-indicators-scroll wrapper to enable horizontal scrolling for many indicators
✨ Tip 3: Captions are optional—omit
.carousel-caption for image-only carousels
✨ Tip 4: Always include meaningful
alt text for images for screen reader users
✨ Tip 5: Use pause controls if auto-rotation is enabled—some users need more time to process content
Troubleshooting
Carousel Not Advancing?
- Check:
carousel.jsis loaded afterlayout.js - Check: First slide has
class="carousel-slide active" - Check: Arrow elements have correct classes (
.carousel-prev-arrow,.carousel-next-arrow)
Auto-Rotation Not Working?
- Ensure:
data-auto-rotate="true"is on the.slidercontainer - Ensure:
event-listeners.jsis loaded - Check: No JavaScript errors in console
Indicators Not Clickable?
- Verify: Each indicator has
data-slide-indexmatching slide order (0, 1, 2...) - Verify: Indicators have
class="slider-indicator"
ADA Compliance Built-In
RSL Carousels are ADA-compliant by default:
- ✅ Keyboard navigation through arrows and indicators
- ✅ Pause/play controls for users who need more time
- ✅ Captions provide context for screen reader users
- ✅ Image alt text required for accessibility
- ✅ Focus visible on navigation elements
- ✅ Auto-rotation can be paused to prevent distraction
Next Steps
See It In Action
Open carousel.html for live demos
Customize Styling
Use custom CSS to match your brand colors and design
Advanced Features
Combine with modals for lightbox-style image viewing