HTML CSS
(a quick example)
<div class="hwrap"><div class="hmove"> <div class="slide">Slide 1</div> <div class="slide">Slide 2</div> <div class="slide">Slide 3</div> </div></div>
hwrap
hmove & slides
.hwrap Fixed area on the screen. .slide Forced into long horizontal row. .hmove Use CSS animation to move slides from right-to-left.
FORCE SLIDES INTO HORIZONTAL ROW .hmove { display: flex; } .hslide { width: 100%; flex-shrink: 0; }
OUTER WRAPPER HIDE SCROLLBAR .hwrap { overflow: hidden; }
USE RIGHT POSITION TO ROTATE SLIDES .hmove { position: relative; top: 0; right: 0; } @keyframes slideh { 0% { right: 0; } 30% { right: 0; } 33% { right: 100%; } 63% { right: 100%; } 66% { right: 200%; } 97% { right: 200%; } 100% { right: 0; } }
MOVE SLIDES .hmove { animation: slideh linear 25s infinite; } .hmove:hover { animation-play-state: paused; }