HTML CSS
SIMPLE TEXT SLIDER WITH HTML CSS
<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>
THE HTML
01
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.
THE IDEA & MECHANICS
02
.hwrap { width: 100%; height: 200px; overflow: hidden; }
FIXED OUTSIDE WRAPPER
03
.hmove { display: flex; position: relative; top: 0; right: 0; } .slide { width: 100%; flex-shrink: 0; }
SLIDES INTO HORIZONTAL ROW
04
@keyframes slideh { 0% { right: 0; } 33% { right: 0; } 34% { right: 100%; } 66% { right: 100%; } 67% { right: 200%; } 99% { right: 200%; } 100% { right: 0; } }
.hmove { animation: slideh linear 25s infinite; } .hmove:hover { animation-play-state: paused; }
SLIDES INTO HORIZONTAL ROW
05