Trang chủ
Carousel Marquee Right
Save
Settings
Sign Up
Log In
Save
Settings
HTML
Copy
<div class="carousel-marquee"> <div class="carousel-track"> <div class="carousel-cell">1</div> <div class="carousel-cell">2</div> <div class="carousel-cell">3</div> <div class="carousel-cell">4</div> <div class="carousel-cell">5</div> </div> </div>
CSS
Copy
.carousel-marquee { overflow: hidden; width: 100%; } .carousel-track { display: flex; animation: scrollRight 20s linear infinite; } .carousel-marquee:hover .carousel-track { animation-play-state: paused; } .carousel-cell { min-width: 200px; height: 150px; background: #8C8; margin-right: 10px; border-radius: 8px; flex-shrink: 0; } @keyframes scrollRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
JS
Copy