|$ curl https://forge-ai.dev/api/markdown?path=docs/components/carousels
$cat docs/carousels-&-sliders.md
updated Recently·16 min read·published
Carousels & Sliders
Scroll-snap carousels, auto-play image sliders with dot indicators and arrow navigation, multi-item responsive carousels, and card-based sliders \u2014 all pure CSS and vanilla JavaScript.
Basic Scroll Snap
The simplest carousel uses CSS scroll-snap-type and scroll-snap-align for native-feeling horizontal scrolling with snapping. No JavaScript required. The track uses flexbox with horizontal overflow, and each slide snaps to the start of the container on scroll.
scroll-snap
Live
untitled.html
HTML
| 1 | <div class="snap-carousel"> |
| 2 | <div class="snap-track"> |
| 3 | <div class="snap-slide" style="background:linear-gradient(135deg,#0f2027,#203a43)"> |
| 4 | <div class="slide-content"> |
| 5 | <span class="slide-tag"> |
| 6 | 01 |
| 7 | </span> |
| 8 | <h3> |
| 9 | Mountain Peaks |
| 10 | </h3> |
| 11 | <p> |
| 12 | Explore the world's highest summits |
| 13 | </p> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="snap-slide" style="background:linear-gradient(135deg,#1a0533,#2d1b69)"> |
| 17 | <div class="slide-content"> |
| 18 | <span class="slide-tag"> |
| 19 | 02 |
| 20 | </span> |
| 21 | <h3> |
| 22 | Deep Ocean |
| 23 | </h3> |
| 24 | <p> |
| 25 | Dive into the unknown depths |
| 26 | </p> |
| 27 | </div> |
| 28 | </div> |
| 29 | <div class="snap-slide" style="background:linear-gradient(135deg,#0c2340,#1e5a8a)"> |
| 30 | <div class="slide-content"> |
| 31 | <span class="slide-tag"> |
| 32 | 03 |
| 33 | </span> |
| 34 | <h3> |
| 35 | Northern Lights |
| 36 | </h3> |
| 37 | <p> |
| 38 | Witness the aurora borealis |
| 39 | </p> |
| 40 | </div> |
| 41 | </div> |
| 42 | <div class="snap-slide" style="background:linear-gradient(135deg,#2d1810,#5a3a28)"> |
| 43 | <div class="slide-content"> |
| 44 | <span class="slide-tag"> |
| 45 | 04 |
| 46 | </span> |
| 47 | <h3> |
| 48 | Desert Dunes |
| 49 | </h3> |
| 50 | <p> |
| 51 | Traverse endless sand landscapes |
| 52 | </p> |
| 53 | </div> |
| 54 | </div> |
| 55 | </div> |
| 56 | </div> |
untitled.css
CSS
| 1 | .snap-carousel { |
| 2 | width:100%; |
| 3 | overflow:hidden; |
| 4 | padding:0 16px; |
| 5 | font-family:system-ui, |
| 6 | sans-serif |
| 7 | } |
| 8 | .snap-track { |
| 9 | display:flex; |
| 10 | gap:12px; |
| 11 | overflow-x:auto; |
| 12 | scroll-snap-type:x mandatory; |
| 13 | scroll-behavior:smooth; |
| 14 | -webkit-overflow-scrolling:touch; |
| 15 | padding:16px 0; |
| 16 | scrollbar-width:none |
| 17 | } |
| 18 | .snap-track::-webkit-scrollbar { |
| 19 | display:none |
| 20 | } |
| 21 | .snap-slide { |
| 22 | flex:0 0 calc(100% - 32px); |
| 23 | scroll-snap-align:start; |
| 24 | border-radius:12px; |
| 25 | padding:32px 24px; |
| 26 | min-height:180px; |
| 27 | display:flex; |
| 28 | align-items:flex-end; |
| 29 | position:relative; |
| 30 | overflow:hidden |
| 31 | } |
| 32 | .slide-content { |
| 33 | position:relative; |
| 34 | z-index:1 |
| 35 | } |
| 36 | .slide-tag { |
| 37 | font-size:10px; |
| 38 | color:rgba(0, |
| 39 | 255, |
| 40 | 65, |
| 41 | .6); |
| 42 | font-weight:700; |
| 43 | letter-spacing:1px; |
| 44 | display:block; |
| 45 | margin-bottom:8px |
| 46 | } |
| 47 | .slide-content h3 { |
| 48 | font-size:18px; |
| 49 | font-weight:700; |
| 50 | color:#E0E0E0; |
| 51 | margin:0 0 4px |
| 52 | } |
| 53 | .slide-content p { |
| 54 | font-size:12px; |
| 55 | color:rgba(255, |
| 56 | 255, |
| 57 | 255, |
| 58 | .6); |
| 59 | margin:0 |
| 60 | } |
Scroll Snap CSS Reference
Scroll snap is a CSS-only solution for carousel behavior. The key properties are scroll-snap-type on the container (mandatory or proximity) and scroll-snap-align on each child (start, center, or end).
scroll-snap.css
CSS
| 1 | /* Container: mandatory snap on X axis */ |
| 2 | .carousel-track { |
| 3 | display: flex; |
| 4 | overflow-x: auto; |
| 5 | scroll-snap-type: x mandatory; |
| 6 | scroll-behavior: smooth; |
| 7 | gap: 12px; |
| 8 | } |
| 9 | |
| 10 | /* Each slide: snap to start */ |
| 11 | .carousel-slide { |
| 12 | flex: 0 0 100%; |
| 13 | scroll-snap-align: start; |
| 14 | } |
| 15 | |
| 16 | /* Optional: hide scrollbar */ |
| 17 | .carousel-track::-webkit-scrollbar { |
| 18 | display: none; |
| 19 | } |
| 20 | .carousel-track { |
| 21 | scrollbar-width: none; |
| 22 | } |
Arrow Navigation
A carousel with previous/next arrow buttons that scroll to the adjacent slide. The arrows disable at boundaries and the active slide is tracked for the dot indicators. Arrow buttons overlay the carousel with absolute positioning.
arrows
Live
untitled.html
HTML
| 1 | <div class="arrow-carousel"> |
| 2 | <div class="ac-track" id="ac-track"> |
| 3 | <div class="ac-slide"> |
| 4 | <div class="ac-card"> |
| 5 | <div class="ac-img" style="background:#1a1a2e"> |
| 6 | <span class="ac-num"> |
| 7 | 01 |
| 8 | </span> |
| 9 | </div> |
| 10 | <div class="ac-info"> |
| 11 | <h4> |
| 12 | Project Alpha |
| 13 | </h4> |
| 14 | <p> |
| 15 | Design system and component library |
| 16 | </p> |
| 17 | </div> |
| 18 | </div> |
| 19 | </div> |
| 20 | <div class="ac-slide"> |
| 21 | <div class="ac-card"> |
| 22 | <div class="ac-img" style="background:#16213e"> |
| 23 | <span class="ac-num"> |
| 24 | 02 |
| 25 | </span> |
| 26 | </div> |
| 27 | <div class="ac-info"> |
| 28 | <h4> |
| 29 | Project Beta |
| 30 | </h4> |
| 31 | <p> |
| 32 | API gateway and microservices |
| 33 | </p> |
| 34 | </div> |
| 35 | </div> |
| 36 | </div> |
| 37 | <div class="ac-slide"> |
| 38 | <div class="ac-card"> |
| 39 | <div class="ac-img" style="background:#0f3460"> |
| 40 | <span class="ac-num"> |
| 41 | 03 |
| 42 | </span> |
| 43 | </div> |
| 44 | <div class="ac-info"> |
| 45 | <h4> |
| 46 | Project Gamma |
| 47 | </h4> |
| 48 | <p> |
| 49 | Machine learning pipeline |
| 50 | </p> |
| 51 | </div> |
| 52 | </div> |
| 53 | </div> |
| 54 | <div class="ac-slide"> |
| 55 | <div class="ac-card"> |
| 56 | <div class="ac-img" style="background:#533483"> |
| 57 | <span class="ac-num"> |
| 58 | 04 |
| 59 | </span> |
| 60 | </div> |
| 61 | <div class="ac-info"> |
| 62 | <h4> |
| 63 | Project Delta |
| 64 | </h4> |
| 65 | <p> |
| 66 | Real-time analytics dashboard |
| 67 | </p> |
| 68 | </div> |
| 69 | </div> |
| 70 | </div> |
| 71 | </div> |
| 72 | <button class="ac-arrow ac-prev" id="ac-prev" disabled> |
| 73 | ‹ |
| 74 | </button> |
| 75 | <button class="ac-arrow ac-next" id="ac-next"> |
| 76 | › |
| 77 | </button> |
| 78 | <div class="ac-dots" id="ac-dots"> |
| 79 | <span class="ac-dot active"> |
| 80 | </span> |
| 81 | <span class="ac-dot"> |
| 82 | </span> |
| 83 | <span class="ac-dot"> |
| 84 | </span> |
| 85 | <span class="ac-dot"> |
| 86 | </span> |
| 87 | </div> |
| 88 | </div> |
untitled.css
CSS
| 1 | .arrow-carousel { |
| 2 | position:relative; |
| 3 | max-width:400px; |
| 4 | margin:16px auto; |
| 5 | padding:0 16px; |
| 6 | font-family:system-ui, |
| 7 | sans-serif |
| 8 | } |
| 9 | .ac-track { |
| 10 | display:flex; |
| 11 | gap:12px; |
| 12 | overflow:hidden; |
| 13 | scroll-snap-type:x mandatory; |
| 14 | scroll-behavior:smooth; |
| 15 | scrollbar-width:none |
| 16 | } |
| 17 | .ac-track::-webkit-scrollbar { |
| 18 | display:none |
| 19 | } |
| 20 | .ac-slide { |
| 21 | flex:0 0 100%; |
| 22 | scroll-snap-align:start |
| 23 | } |
| 24 | .ac-card { |
| 25 | background:#111; |
| 26 | border:1px solid #222; |
| 27 | border-radius:10px; |
| 28 | overflow:hidden |
| 29 | } |
| 30 | .ac-img { |
| 31 | height:120px; |
| 32 | display:flex; |
| 33 | align-items:center; |
| 34 | justify-content:center |
| 35 | } |
| 36 | .ac-num { |
| 37 | font-size:32px; |
| 38 | font-weight:800; |
| 39 | color:rgba(255, |
| 40 | 255, |
| 41 | 255, |
| 42 | .15) |
| 43 | } |
| 44 | .ac-info { |
| 45 | padding:14px 16px |
| 46 | } |
| 47 | .ac-info h4 { |
| 48 | font-size:14px; |
| 49 | font-weight:600; |
| 50 | color:#E0E0E0; |
| 51 | margin:0 0 4px |
| 52 | } |
| 53 | .ac-info p { |
| 54 | font-size:11px; |
| 55 | color:#808080; |
| 56 | margin:0 |
| 57 | } |
| 58 | .ac-arrow { |
| 59 | position:absolute; |
| 60 | top:50%; |
| 61 | transform:translateY(-50%); |
| 62 | width:32px; |
| 63 | height:32px; |
| 64 | border-radius:50%; |
| 65 | border:1px solid #333; |
| 66 | background:rgba(10, |
| 67 | 10, |
| 68 | 10, |
| 69 | .8); |
| 70 | color:#E0E0E0; |
| 71 | font-size:18px; |
| 72 | cursor:pointer; |
| 73 | display:flex; |
| 74 | align-items:center; |
| 75 | justify-content:center; |
| 76 | transition:all .2s; |
| 77 | z-index:3; |
| 78 | backdrop-filter:blur(4px) |
| 79 | } |
| 80 | .ac-arrow:hover:not(:disabled) { |
| 81 | background:#00FF41; |
| 82 | color:#0A0A0A; |
| 83 | border-color:#00FF41 |
| 84 | } |
| 85 | .ac-arrow:disabled { |
| 86 | opacity:.3; |
| 87 | cursor:not-allowed |
| 88 | } |
| 89 | .ac-prev { |
| 90 | left:4px |
| 91 | } |
| 92 | .ac-next { |
| 93 | right:4px |
| 94 | } |
| 95 | .ac-dots { |
| 96 | display:flex; |
| 97 | gap:6px; |
| 98 | justify-content:center; |
| 99 | margin-top:12px |
| 100 | } |
| 101 | .ac-dot { |
| 102 | width:6px; |
| 103 | height:6px; |
| 104 | border-radius:50%; |
| 105 | background:#333; |
| 106 | cursor:pointer; |
| 107 | transition:all .2s |
| 108 | } |
| 109 | .ac-dot.active { |
| 110 | background:#00FF41; |
| 111 | width:18px; |
| 112 | border-radius:3px |
| 113 | } |
untitled.js
JavaScript
| 1 | const track=document.getElementById('ac-track');const prev=document.getElementById('ac-prev');const next=document.getElementById('ac-next');const dots=document.querySelectorAll('.ac-dot');let current=0;const total=dots.length;function goTo(i){current=Math.max(0,Math.min(i,total-1));track.scrollTo({left:current*(track.offsetWidth/1),behavior:'smooth'});dots.forEach((d,j)=>d.classList.toggle('active',j===current));prev.disabled=current===0;next.disabled=current===total-1}prev.addEventListener('click',()=>goTo(current-1));next.addEventListener('click',()=>goTo(current+1));dots.forEach((d,i)=>d.addEventListener('click',()=>goTo(i))) |
Auto-Play with Pause
An auto-advancing carousel that pauses on hover and resumes when the cursor leaves. A progress bar shows the time remaining before the next transition. Uses setTimeout for timing and resets the CSS animation on each slide change.
autoplay
Live
untitled.html
HTML
| 1 | <div class="auto-carousel" id="auto-carousel"> |
| 2 | <div class="auto-track" id="auto-track"> |
| 3 | <div class="auto-slide"> |
| 4 | <div class="auto-card gradient-1"> |
| 5 | <div class="auto-body"> |
| 6 | <span class="auto-badge"> |
| 7 | Featured |
| 8 | </span> |
| 9 | <h3> |
| 10 | Design Systems |
| 11 | </h3> |
| 12 | <p> |
| 13 | Building scalable component libraries with consistent tokens, patterns, and documentation. |
| 14 | </p> |
| 15 | <button class="auto-btn"> |
| 16 | Learn More |
| 17 | </button> |
| 18 | </div> |
| 19 | </div> |
| 20 | </div> |
| 21 | <div class="auto-slide"> |
| 22 | <div class="auto-card gradient-2"> |
| 23 | <div class="auto-body"> |
| 24 | <span class="auto-badge"> |
| 25 | New |
| 26 | </span> |
| 27 | <h3> |
| 28 | Edge Computing |
| 29 | </h3> |
| 30 | <p> |
| 31 | Deploy serverless functions to 200+ edge locations worldwide for sub-millisecond latency. |
| 32 | </p> |
| 33 | <button class="auto-btn"> |
| 34 | Learn More |
| 35 | </button> |
| 36 | </div> |
| 37 | </div> |
| 38 | </div> |
| 39 | <div class="auto-slide"> |
| 40 | <div class="auto-card gradient-3"> |
| 41 | <div class="auto-body"> |
| 42 | <span class="auto-badge"> |
| 43 | Popular |
| 44 | </span> |
| 45 | <h3> |
| 46 | AI Workflows |
| 47 | </h3> |
| 48 | <p> |
| 49 | Orchestrate multi-step AI pipelines with automatic retries and cost optimization. |
| 50 | </p> |
| 51 | <button class="auto-btn"> |
| 52 | Learn More |
| 53 | </button> |
| 54 | </div> |
| 55 | </div> |
| 56 | </div> |
| 57 | </div> |
| 58 | <div class="auto-progress" id="auto-progress"> |
| 59 | <div class="auto-bar"> |
| 60 | </div> |
| 61 | </div> |
| 62 | <div class="auto-controls"> |
| 63 | <button class="auto-arrow" id="auto-prev"> |
| 64 | ‹ |
| 65 | </button> |
| 66 | <div class="auto-dots" id="auto-dots"> |
| 67 | <span class="ad active"> |
| 68 | </span> |
| 69 | <span class="ad"> |
| 70 | </span> |
| 71 | <span class="ad"> |
| 72 | </span> |
| 73 | </div> |
| 74 | <button class="auto-arrow" id="auto-next"> |
| 75 | › |
| 76 | </button> |
| 77 | </div> |
| 78 | </div> |
untitled.css
CSS
| 1 | .auto-carousel { |
| 2 | max-width:400px; |
| 3 | margin:16px auto; |
| 4 | border-radius:12px; |
| 5 | border:1px solid #222; |
| 6 | overflow:hidden; |
| 7 | background:#111; |
| 8 | font-family:system-ui, |
| 9 | sans-serif |
| 10 | } |
| 11 | .auto-track { |
| 12 | display:flex; |
| 13 | transition:transform .5s cubic-bezier(.4, |
| 14 | 0, |
| 15 | .2, |
| 16 | 1) |
| 17 | } |
| 18 | .auto-slide { |
| 19 | flex:0 0 100%; |
| 20 | min-width:100% |
| 21 | } |
| 22 | .auto-card { |
| 23 | min-height:200px; |
| 24 | padding:24px; |
| 25 | display:flex; |
| 26 | align-items:flex-end |
| 27 | } |
| 28 | .gradient-1 { |
| 29 | background:linear-gradient(135deg, |
| 30 | #0f2027, |
| 31 | #203a43, |
| 32 | #2c5364) |
| 33 | } |
| 34 | .gradient-2 { |
| 35 | background:linear-gradient(135deg, |
| 36 | #1a0533, |
| 37 | #2d1b69, |
| 38 | #5b2c8e) |
| 39 | } |
| 40 | .gradient-3 { |
| 41 | background:linear-gradient(135deg, |
| 42 | #0c2340, |
| 43 | #1e5a8a, |
| 44 | #2980b9) |
| 45 | } |
| 46 | .auto-body { |
| 47 | position:relative; |
| 48 | z-index:1 |
| 49 | } |
| 50 | .auto-badge { |
| 51 | display:inline-block; |
| 52 | padding:3px 8px; |
| 53 | border-radius:4px; |
| 54 | font-size:9px; |
| 55 | font-weight:700; |
| 56 | text-transform:uppercase; |
| 57 | letter-spacing:.5px; |
| 58 | background:rgba(0, |
| 59 | 255, |
| 60 | 65, |
| 61 | .15); |
| 62 | color:#00FF41; |
| 63 | margin-bottom:10px |
| 64 | } |
| 65 | .auto-body h3 { |
| 66 | font-size:18px; |
| 67 | font-weight:700; |
| 68 | color:#E0E0E0; |
| 69 | margin:0 0 6px |
| 70 | } |
| 71 | .auto-body p { |
| 72 | font-size:12px; |
| 73 | color:rgba(255, |
| 74 | 255, |
| 75 | 255, |
| 76 | .6); |
| 77 | margin:0 0 14px; |
| 78 | line-height:1.5 |
| 79 | } |
| 80 | .auto-btn { |
| 81 | padding:8px 16px; |
| 82 | border-radius:6px; |
| 83 | font-size:11px; |
| 84 | font-weight:600; |
| 85 | background:#00FF41; |
| 86 | color:#0A0A0A; |
| 87 | border:none; |
| 88 | cursor:pointer; |
| 89 | transition:all .2s |
| 90 | } |
| 91 | .auto-btn:hover { |
| 92 | transform:translateY(-1px); |
| 93 | box-shadow:0 4px 12px rgba(0, |
| 94 | 0, |
| 95 | 0, |
| 96 | .3) |
| 97 | } |
| 98 | .auto-progress { |
| 99 | height:3px; |
| 100 | background:#222 |
| 101 | } |
| 102 | .auto-bar { |
| 103 | height:100%; |
| 104 | background:#00FF41; |
| 105 | width:0%; |
| 106 | transition:width 4s linear |
| 107 | } |
| 108 | .auto-bar.playing { |
| 109 | width:100% |
| 110 | } |
| 111 | .auto-controls { |
| 112 | display:flex; |
| 113 | align-items:center; |
| 114 | justify-content:space-between; |
| 115 | padding:12px 16px |
| 116 | } |
| 117 | .auto-arrow { |
| 118 | width:28px; |
| 119 | height:28px; |
| 120 | border-radius:6px; |
| 121 | border:1px solid #333; |
| 122 | background:transparent; |
| 123 | color:#808080; |
| 124 | font-size:16px; |
| 125 | cursor:pointer; |
| 126 | display:flex; |
| 127 | align-items:center; |
| 128 | justify-content:center; |
| 129 | transition:all .2s |
| 130 | } |
| 131 | .auto-arrow:hover { |
| 132 | background:rgba(255, |
| 133 | 255, |
| 134 | 255, |
| 135 | .05); |
| 136 | color:#E0E0E0 |
| 137 | } |
| 138 | .auto-dots { |
| 139 | display:flex; |
| 140 | gap:6px |
| 141 | } |
| 142 | .ad { |
| 143 | width:6px; |
| 144 | height:6px; |
| 145 | border-radius:50%; |
| 146 | background:#333; |
| 147 | transition:all .2s; |
| 148 | cursor:pointer |
| 149 | } |
| 150 | .ad.active { |
| 151 | background:#00FF41; |
| 152 | width:18px; |
| 153 | border-radius:3px |
| 154 | } |
untitled.js
JavaScript
| 1 | const carousel=document.getElementById('auto-carousel');const track=document.getElementById('auto-track');const bar=carousel.querySelector('.auto-bar');const dots=document.querySelectorAll('.ad');let idx=0;const len=dots.length;let timer;let playing=false;function slide(i){bar.classList.remove('playing');void bar.offsetWidth;idx=(i+len)%len;track.style.transform='translateX(-'+idx*100+'%)';dots.forEach((d,j)=>d.classList.toggle('active',j===idx))}function play(){bar.classList.remove('playing');void bar.offsetWidth;bar.classList.add('playing');playing=true;timer=setTimeout(()=>{slide(idx+1);play()},4000)}function stop(){clearTimeout(timer);bar.classList.remove('playing');playing=false}document.getElementById('auto-prev').addEventListener('click',()=>{slide(idx-1);if(playing)play()});document.getElementById('auto-next').addEventListener('click',()=>{slide(idx+1);if(playing)play()});dots.forEach((d,i)=>d.addEventListener('click',()=>{slide(i);if(playing)play()}));carousel.addEventListener('mouseenter',stop);carousel.addEventListener('mouseleave',play);play() |
Multi-Item Carousel
Shows multiple items at once with scroll snap. Each card snaps into place using flex: 0 0 calc(33.333% - 7px) for three visible items, and the last items fill the remaining space. Ideal for product grids and card lists.
multi-item
Live
untitled.html
HTML
| 1 | <div class="multi-carousel"> |
| 2 | <div class="multi-track"> |
| 3 | <div class="multi-card"> |
| 4 | <div class="mc-avatar" style="background:#1a1a2e"> |
| 5 | JS |
| 6 | </div> |
| 7 | <div class="mc-info"> |
| 8 | <h5> |
| 9 | JavaScript |
| 10 | </h5> |
| 11 | <span> |
| 12 | 24 lessons |
| 13 | </span> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="multi-card"> |
| 17 | <div class="mc-avatar" style="background:#16213e"> |
| 18 | TS |
| 19 | </div> |
| 20 | <div class="mc-info"> |
| 21 | <h5> |
| 22 | TypeScript |
| 23 | </h5> |
| 24 | <span> |
| 25 | 18 lessons |
| 26 | </span> |
| 27 | </div> |
| 28 | </div> |
| 29 | <div class="multi-card"> |
| 30 | <div class="mc-avatar" style="background:#0f3460"> |
| 31 | PY |
| 32 | </div> |
| 33 | <div class="mc-info"> |
| 34 | <h5> |
| 35 | Python |
| 36 | </h5> |
| 37 | <span> |
| 38 | 32 lessons |
| 39 | </span> |
| 40 | </div> |
| 41 | </div> |
| 42 | <div class="multi-card"> |
| 43 | <div class="mc-avatar" style="background:#533483"> |
| 44 | RS |
| 45 | </div> |
| 46 | <div class="mc-info"> |
| 47 | <h5> |
| 48 | Rust |
| 49 | </h5> |
| 50 | <span> |
| 51 | 14 lessons |
| 52 | </span> |
| 53 | </div> |
| 54 | </div> |
| 55 | <div class="multi-card"> |
| 56 | <div class="mc-avatar" style="background:#2d1810"> |
| 57 | GO |
| 58 | </div> |
| 59 | <div class="mc-info"> |
| 60 | <h5> |
| 61 | Go |
| 62 | </h5> |
| 63 | <span> |
| 64 | 20 lessons |
| 65 | </span> |
| 66 | </div> |
| 67 | </div> |
| 68 | <div class="multi-card"> |
| 69 | <div class="mc-avatar" style="background:#1a3a1a"> |
| 70 | SW |
| 71 | </div> |
| 72 | <div class="mc-info"> |
| 73 | <h5> |
| 74 | Swift |
| 75 | </h5> |
| 76 | <span> |
| 77 | 16 lessons |
| 78 | </span> |
| 79 | </div> |
| 80 | </div> |
| 81 | </div> |
| 82 | </div> |
untitled.css
CSS
| 1 | .multi-carousel { |
| 2 | width:100%; |
| 3 | overflow:hidden; |
| 4 | font-family:system-ui, |
| 5 | sans-serif |
| 6 | } |
| 7 | .multi-track { |
| 8 | display:flex; |
| 9 | gap:10px; |
| 10 | overflow-x:auto; |
| 11 | scroll-snap-type:x mandatory; |
| 12 | scroll-behavior:smooth; |
| 13 | padding:16px 4px; |
| 14 | scrollbar-width:none |
| 15 | } |
| 16 | .multi-track::-webkit-scrollbar { |
| 17 | display:none |
| 18 | } |
| 19 | .multi-card { |
| 20 | flex:0 0 calc(33.333% - 7px); |
| 21 | scroll-snap-align:start; |
| 22 | background:#111; |
| 23 | border:1px solid #222; |
| 24 | border-radius:10px; |
| 25 | padding:14px; |
| 26 | display:flex; |
| 27 | flex-direction:column; |
| 28 | align-items:center; |
| 29 | gap:10px; |
| 30 | transition:border-color .2s |
| 31 | } |
| 32 | .multi-card:hover { |
| 33 | border-color:rgba(0, |
| 34 | 255, |
| 35 | 65, |
| 36 | .3) |
| 37 | } |
| 38 | .mc-avatar { |
| 39 | width:40px; |
| 40 | height:40px; |
| 41 | border-radius:8px; |
| 42 | display:flex; |
| 43 | align-items:center; |
| 44 | justify-content:center; |
| 45 | font-size:12px; |
| 46 | font-weight:800; |
| 47 | color:rgba(255, |
| 48 | 255, |
| 49 | 255, |
| 50 | .6) |
| 51 | } |
| 52 | .mc-info { |
| 53 | text-align:center |
| 54 | } |
| 55 | .mc-info h5 { |
| 56 | font-size:12px; |
| 57 | font-weight:600; |
| 58 | color:#E0E0E0; |
| 59 | margin:0 0 2px |
| 60 | } |
| 61 | .mc-info span { |
| 62 | font-size:10px; |
| 63 | color:#666 |
| 64 | } |
Testimonial Slider
A content-focused carousel for testimonials and quotes with author details, star ratings, and smooth crossfade transitions between items. Auto-advances every 5 seconds with manual dot navigation.
testimonial
Live
untitled.html
HTML
| 1 | <div class="testi-carousel" id="testi-carousel"> |
| 2 | <div class="testi-slide active" id="ts-0"> |
| 3 | <div class="testi-stars"> |
| 4 | ★★★★★ |
| 5 | </div> |
| 6 | <blockquote class="testi-quote"> |
| 7 | "This design system reduced our component development time by 60%. The token architecture is incredibly well thought out." |
| 8 | </blockquote> |
| 9 | <div class="testi-author"> |
| 10 | <div class="testi-avatar"> |
| 11 | SK |
| 12 | </div> |
| 13 | <div> |
| 14 | <span class="testi-name"> |
| 15 | Sarah Kim |
| 16 | </span> |
| 17 | <span class="testi-role"> |
| 18 | Engineering Lead, Vercel |
| 19 | </span> |
| 20 | </div> |
| 21 | </div> |
| 22 | </div> |
| 23 | <div class="testi-slide" id="ts-1"> |
| 24 | <div class="testi-stars"> |
| 25 | ★★★★★ |
| 26 | </div> |
| 27 | <blockquote class="testi-quote"> |
| 28 | "We migrated our entire frontend in 3 weeks. The component API is consistent and the documentation is outstanding." |
| 29 | </blockquote> |
| 30 | <div class="testi-author"> |
| 31 | <div class="testi-avatar"> |
| 32 | MR |
| 33 | </div> |
| 34 | <div> |
| 35 | <span class="testi-name"> |
| 36 | Marcus Rivera |
| 37 | </span> |
| 38 | <span class="testi-role"> |
| 39 | CTO, Stripe |
| 40 | </span> |
| 41 | </div> |
| 42 | </div> |
| 43 | </div> |
| 44 | <div class="testi-slide" id="ts-2"> |
| 45 | <div class="testi-stars"> |
| 46 | ★★★★★ |
| 47 | </div> |
| 48 | <blockquote class="testi-quote"> |
| 49 | "The accessibility-first approach means we don't have to retrofit a11y later. Every component works with screen readers out of the box." |
| 50 | </blockquote> |
| 51 | <div class="testi-author"> |
| 52 | <div class="testi-avatar"> |
| 53 | AL |
| 54 | </div> |
| 55 | <div> |
| 56 | <span class="testi-name"> |
| 57 | Aisha Liang |
| 58 | </span> |
| 59 | <span class="testi-role"> |
| 60 | Designer, Figma |
| 61 | </span> |
| 62 | </div> |
| 63 | </div> |
| 64 | </div> |
| 65 | <div class="testi-nav"> |
| 66 | <button class="tn active" data-i="0"> |
| 67 | </button> |
| 68 | <button class="tn" data-i="1"> |
| 69 | </button> |
| 70 | <button class="tn" data-i="2"> |
| 71 | </button> |
| 72 | </div> |
| 73 | </div> |
untitled.css
CSS
| 1 | .testi-carousel { |
| 2 | max-width:380px; |
| 3 | margin:16px auto; |
| 4 | padding:24px; |
| 5 | background:#111; |
| 6 | border:1px solid #222; |
| 7 | border-radius:12px; |
| 8 | position:relative; |
| 9 | font-family:system-ui, |
| 10 | sans-serif; |
| 11 | min-height:220px |
| 12 | } |
| 13 | .testi-slide { |
| 14 | display:none; |
| 15 | flex-direction:column; |
| 16 | gap:16px; |
| 17 | animation:fadeIn .3s ease |
| 18 | } |
| 19 | .testi-slide.active { |
| 20 | display:flex |
| 21 | } |
| 22 | .testi-stars { |
| 23 | color:#FBBF24; |
| 24 | font-size:14px; |
| 25 | letter-spacing:2px |
| 26 | } |
| 27 | .testi-quote { |
| 28 | font-size:13px; |
| 29 | color:#C0C0C0; |
| 30 | line-height:1.6; |
| 31 | margin:0; |
| 32 | font-style:italic; |
| 33 | border-left:2px solid #00FF41; |
| 34 | padding-left:14px |
| 35 | } |
| 36 | .testi-author { |
| 37 | display:flex; |
| 38 | align-items:center; |
| 39 | gap:10px |
| 40 | } |
| 41 | .testi-avatar { |
| 42 | width:36px; |
| 43 | height:36px; |
| 44 | border-radius:50%; |
| 45 | background:#1A1A2E; |
| 46 | display:flex; |
| 47 | align-items:center; |
| 48 | justify-content:center; |
| 49 | font-size:11px; |
| 50 | font-weight:700; |
| 51 | color:#00FF41 |
| 52 | } |
| 53 | .testi-name { |
| 54 | display:block; |
| 55 | font-size:12px; |
| 56 | font-weight:600; |
| 57 | color:#E0E0E0 |
| 58 | } |
| 59 | .testi-role { |
| 60 | display:block; |
| 61 | font-size:10px; |
| 62 | color:#666; |
| 63 | margin-top:2px |
| 64 | } |
| 65 | .testi-nav { |
| 66 | display:flex; |
| 67 | gap:6px; |
| 68 | justify-content:center; |
| 69 | position:absolute; |
| 70 | bottom:16px; |
| 71 | left:50%; |
| 72 | transform:translateX(-50%) |
| 73 | } |
| 74 | .tn { |
| 75 | width:6px; |
| 76 | height:6px; |
| 77 | border-radius:50%; |
| 78 | border:none; |
| 79 | background:#333; |
| 80 | cursor:pointer; |
| 81 | transition:all .2s; |
| 82 | padding:0 |
| 83 | } |
| 84 | .tn.active { |
| 85 | background:#00FF41; |
| 86 | width:18px; |
| 87 | border-radius:3px |
| 88 | } |
| 89 | @keyframes fadeIn { |
| 90 | from { |
| 91 | opacity:0; |
| 92 | transform:translateY(8px) |
| 93 | } |
| 94 | to { |
| 95 | opacity:1; |
| 96 | transform:translateY(0) |
| 97 | } |
| 98 | } |
untitled.js
JavaScript
| 1 | let cur=0;const slides=document.querySelectorAll('.testi-slide');const tns=document.querySelectorAll('.tn');function show(i){slides.forEach(s=>s.classList.remove('active'));tns.forEach(t=>t.classList.remove('active'));slides[i].classList.add('active');tns[i].classList.add('active');cur=i}tns.forEach(t=>t.addEventListener('click',()=>show(parseInt(t.dataset.i))));setInterval(()=>show((cur+1)%slides.length),5000) |
Thumbnail Navigation
A main image with thumbnail strip below for direct slide selection. Clicking a thumbnail jumps to that slide and highlights the active thumbnail. The strip syncs bidirectionally with the main view via scroll position.
thumbnail
Live
untitled.html
HTML
| 1 | <div class="thumb-carousel"> |
| 2 | <div class="tc-main" id="tc-main"> |
| 3 | <div class="tc-big" style="background:linear-gradient(135deg,#0f2027,#203a43)"> |
| 4 | <span class="tc-label"> |
| 5 | Tokyo |
| 6 | </span> |
| 7 | </div> |
| 8 | <div class="tc-big" style="background:linear-gradient(135deg,#1a0533,#2d1b69)"> |
| 9 | <span class="tc-label"> |
| 10 | Kyoto |
| 11 | </span> |
| 12 | </div> |
| 13 | <div class="tc-big" style="background:linear-gradient(135deg,#0c2340,#1e5a8a)"> |
| 14 | <span class="tc-label"> |
| 15 | Osaka |
| 16 | </span> |
| 17 | </div> |
| 18 | <div class="tc-big" style="background:linear-gradient(135deg,#2d1810,#5a3a28)"> |
| 19 | <span class="tc-label"> |
| 20 | Hiroshima |
| 21 | </span> |
| 22 | </div> |
| 23 | </div> |
| 24 | <div class="tc-strip"> |
| 25 | <button class="tc-thumb active" data-i="0"> |
| 26 | <div class="tc-mini" style="background:#1a2a2f"> |
| 27 | </div> |
| 28 | <span> |
| 29 | Tokyo |
| 30 | </span> |
| 31 | </button> |
| 32 | <button class="tc-thumb" data-i="1"> |
| 33 | <div class="tc-mini" style="background:#1a0f33"> |
| 34 | </div> |
| 35 | <span> |
| 36 | Kyoto |
| 37 | </span> |
| 38 | </button> |
| 39 | <button class="tc-thumb" data-i="2"> |
| 40 | <div class="tc-mini" style="background:#0f2a4a"> |
| 41 | </div> |
| 42 | <span> |
| 43 | Osaka |
| 44 | </span> |
| 45 | </button> |
| 46 | <button class="tc-thumb" data-i="3"> |
| 47 | <div class="tc-mini" style="background:#3a2218"> |
| 48 | </div> |
| 49 | <span> |
| 50 | Hiroshima |
| 51 | </span> |
| 52 | </button> |
| 53 | </div> |
| 54 | </div> |
untitled.css
CSS
| 1 | .thumb-carousel { |
| 2 | max-width:400px; |
| 3 | margin:16px auto; |
| 4 | font-family:system-ui, |
| 5 | sans-serif; |
| 6 | border-radius:12px; |
| 7 | overflow:hidden; |
| 8 | border:1px solid #222; |
| 9 | background:#111 |
| 10 | } |
| 11 | .tc-main { |
| 12 | display:flex; |
| 13 | overflow:hidden; |
| 14 | scroll-snap-type:x mandatory; |
| 15 | scroll-behavior:smooth |
| 16 | } |
| 17 | .tc-big { |
| 18 | flex:0 0 100%; |
| 19 | height:160px; |
| 20 | display:flex; |
| 21 | align-items:center; |
| 22 | justify-content:center; |
| 23 | scroll-snap-align:start |
| 24 | } |
| 25 | .tc-label { |
| 26 | font-size:24px; |
| 27 | font-weight:700; |
| 28 | color:rgba(255, |
| 29 | 255, |
| 30 | 255, |
| 31 | .3) |
| 32 | } |
| 33 | .tc-strip { |
| 34 | display:flex; |
| 35 | gap:4px; |
| 36 | padding:8px; |
| 37 | border-top:1px solid #222 |
| 38 | } |
| 39 | .tc-thumb { |
| 40 | flex:1; |
| 41 | display:flex; |
| 42 | flex-direction:column; |
| 43 | align-items:center; |
| 44 | gap:4px; |
| 45 | padding:6px 4px; |
| 46 | border-radius:6px; |
| 47 | border:2px solid transparent; |
| 48 | background:transparent; |
| 49 | cursor:pointer; |
| 50 | transition:all .2s; |
| 51 | font-family:inherit |
| 52 | } |
| 53 | .tc-thumb.active { |
| 54 | border-color:#00FF41; |
| 55 | background:rgba(0, |
| 56 | 255, |
| 57 | 65, |
| 58 | .05) |
| 59 | } |
| 60 | .tc-thumb span { |
| 61 | font-size:9px; |
| 62 | color:#666 |
| 63 | } |
| 64 | .tc-thumb.active span { |
| 65 | color:#00FF41 |
| 66 | } |
| 67 | .tc-mini { |
| 68 | width:100%; |
| 69 | height:24px; |
| 70 | border-radius:4px |
| 71 | } |
untitled.js
JavaScript
| 1 | const main=document.getElementById('tc-main');const thumbs=document.querySelectorAll('.tc-thumb');thumbs.forEach(t=>t.addEventListener('click',()=>{const i=parseInt(t.dataset.i);main.scrollTo({left:i*main.offsetWidth,behavior:'smooth'});thumbs.forEach(x=>x.classList.remove('active'));t.classList.add('active')}));main.addEventListener('scroll',()=>{const i=Math.round(main.scrollLeft/main.offsetWidth);thumbs.forEach((t,j)=>t.classList.toggle('active',j===i))}) |
HTML Structure
The scroll-snap carousel uses a track container with scroll-snap-type: x mandatory and child slides with scroll-snap-align: start. Arrow buttons use scrollTo() for smooth transitions. Always include aria-label on navigation buttons.
carousel-structure.html
HTML
| 1 | <div class="carousel-track" style="scroll-snap-type: x mandatory"> |
| 2 | <div class="carousel-slide" style="scroll-snap-align: start"> |
| 3 | Slide 1 |
| 4 | </div> |
| 5 | <div class="carousel-slide" style="scroll-snap-align: start"> |
| 6 | Slide 2 |
| 7 | </div> |
| 8 | </div> |
| 9 | |
| 10 | <button class="prev" aria-label="Previous slide">‹</button> |
| 11 | <button class="next" aria-label="Next slide">›</button> |
| 12 | |
| 13 | <div class="indicators" role="tablist"> |
| 14 | <button role="tab" aria-selected="true" class="active"></button> |
| 15 | <button role="tab" aria-selected="false"></button> |
| 16 | </div> |
Best Practices
ℹ
info
Use CSS scroll-snap-type for simple carousels \u2014 it provides native-feeling snap behavior with zero JavaScript. Only reach for JS-driven transitions when you need crossfade effects or complex timing control.
⚠
warning
Auto-playing carousels should always pause on hover and respect the prefers-reduced-motion media query. Some users experience motion sickness or vestibular disorders from moving content.
✓
best practice
Include aria-labelon arrow buttons ("Previous slide" / "Next slide") and role="tablist" on dot indicator containers for screen reader accessibility.
- Hide scrollbar with scrollbar-width: none and ::-webkit-scrollbar for a cleaner appearance across all browsers.
- Use overflow: hidden on the carousel container to clip slides at the boundary.
- For multi-item carousels, calculate item width as calc(100% / visibleCount - gap) to fit exactly N items per viewport.
- Add scroll-behavior: smooth for animated scrolling between slides without JavaScript.
- On mobile, support swipe via native touch scrolling \u2014 avoid intercepting touch events unless you need custom gestures.
- For auto-play, use a 4-5 second interval \u2014 fast enough to maintain interest but slow enough to read the content.