HTML CSS

SIMPLE TEXT SLIDER WITH 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>

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

FORCE SLIDES INTO HORIZONTAL ROW .hmove { display: flex; } .hslide { width: 100%; flex-shrink: 0; }

THE CSS PART A

03

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; } }

THE CSS PART B

04

MOVE SLIDES .hmove { animation: slideh linear 25s infinite; } .hmove:hover { animation-play-state: paused; }