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