.scroller-container { overflow: hidden; position: relative; width: 100%; height: 200px; background: #fff; border-top: 3px solid #333; border-bottom: 3px solid #333; cursor: grab; } .scroller-track { display: flex; width: max-content; animation: scroll-left 30s linear infinite; } .scroller-container:hover .scroller-track { animation-play-state: paused; } .scroller-track img { height: 200px; width: 400px; object-fit: contain; margin-right: 10px; user-select: none; pointer-events: auto; background: #ddd; display: flex; align-items: center; justify-content: center; font-family: sans-serif; font-size: 24px; color: #000; } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
