Trang chủ
Carousel Vertical
Save
Settings
Sign Up
Log In
Save
Settings
HTML
Copy
<div class="ch"> <div class="ct"> <div class="ci">1</div> <div class="ci">2</div> <div class="ci">3</div> <div class="ci">4</div> <div class="ci">5</div> <!-- clone để loop mượt --> <div class="ci">1</div> <div class="ci">2</div> <div class="ci">3</div> <div class="ci">4</div> <div class="ci">5</div> </div> </div>
CSS
Copy
.ch { overflow: hidden; width: 600px; height: 160px; background: #f9fafb; border-radius: 8px; } .ct { display: flex; animation: sH 30s linear infinite; } .ch:hover .ct { animation-play-state: paused; } .ci { width: 200px; height: 150px; margin-right: 10px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700; color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* Màu thay đổi cho từng box */ .ci:nth-child(1) { background: #f87171; } .ci:nth-child(2) { background: #60a5fa; } .ci:nth-child(3) { background: #34d399; } .ci:nth-child(4) { background: #fbbf24; } .ci:nth-child(5) { background: #a78bfa; } @keyframes sH { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
JS
Copy