Simple Responsive Pure CSS Text Slider (Horizontal & Vertical)

Welcome to a tutorial on how to create a simple responsive text slider using pure CSS. Sick of those complicated slides that require extra libraries? Why not make your own? Pure CSS text sliders are actually pretty simple, and this guide will walk you through a simple example – Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

1) HORIZONTAL TEXT SLIDER

1A) HORIZONTAL SLIDER HTML 

<div class="hwrap"><div class="hmove">
  <div class="hslide">
    <h3>Slide 1</h3>
    <p>The episode orbits? The panic overwhelms a fuse.</p>
  </div>
  <div class="hslide">
    <h3>Slide 2</h3>
    <p>The lasting astronomer balances the counter reminder.</p>
  </div>
  <div class="hslide">
    <h3>Slide 3</h3>
    <p>Her birthday calculates past a juice!</p>
  </div>
</div></div>

That’s all. The general idea here is to sandwich the slides between 2 <div> wrappers.

 

1B) HORIZONTAL SLIDER CSS

/* (A) FORCE SLIDES INTO SINGLE ROW */
.hmove { display: flex; }
.hslide { width: 100%; flex-shrink: 0; }

/* (B) OUTER WRAPPER HIDE SCROLLBAR */
.hwrap { overflow: hidden; }

/* (C) SHIFT SLIDES WITH CSS ANIMATION */
/* (C1) SLIDES POSITION */
.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; }
}
 
/* (C2) MOVE SLIDES */
.hmove { animation: slideh linear 15s infinite; }
.hmove:hover { animation-play-state: paused; }

This looks like a handful, but keep calm and study slowly.

1. The first thing we do is to lay the slides out in a long horizontal row.
   • Set the inner .hmove wrapper to display: flex.
   • width: 100% and flex-shrink: 0 on .hslide will force all the slides into a long single row.
2. Use overflow: hidden to hide the ugly scrollbar on the outer .hwrap wrapper.
3. Lastly, deal with the slide rotation using CSS animation.
   • (C1) The idea is to use .hmove { position: relative; right: N% } to shift the slides; We create a sequence of @keyframes with different right: N% to rotate the slides.
   • (C2) Finally, attach the keyframes to .hmove, stop moving the slides on mouse hover. The end.

 

 

1C) HORIZONTAL SLIDER DEMO

 

1D) ADDING & REMOVING SLIDES

As you have guessed, adding or removing slides is going to require some “calculations”.

• The HTML is not a problem, just add or remove a <div class="hslide">.
• The not-so-convenient part is with the CSS, where you will have to recalculate the @keyframes slideh. E.G. If you have 4 slides, I will recommend having a stop at every 100% / 4 = 25%. That is:
  • 0 - right: 0
  • 25% - right: 100%
  • 50% - right: 200%
  • 75% - right: 300%
  • 100% - right: 0
• Then add the pauses in between.
  • 20% - right: 0
  • 45% - right: 100%
  • 70% - right: 200%
  • 95% - right: 300%
• Lastly, you may also want to tweak the animation time to speed up or slow down – .hmove { animation: ... 20s ... }

 

 

2) VERTICAL TEXT SLIDER

2A) VERTICAL SLIDER HTML

<div class="vwrap"><div class="vmove">
  <div class="vslide">
    <h3>Slide 1</h3>
    <p>The episode orbits? The panic overwhelms a fuse.</p>
  </div>
  <div class="vslide">
    <h3>Slide 2</h3>
    <p>The lasting astronomer balances the counter reminder.</p>
  </div>
  <div class="vslide">
    <h3>Slide 3</h3>
    <p>Her birthday calculates past a juice!</p>
  </div>
</div></div>

Yep, it’s the same “sandwich slides between 2 <div> containers”. The main changes are with the CSS.

 

2B) VERTICAL SLIDER CSS

/* (A) SAME DIMENSIONS FOR OUTER WRAPPER & SLIDES */
.vwrap, .vslide { width: 100%; height: 150px; }
 
/* (B) OUTER WRAPPER HIDE SCROLLBAR */
.vwrap { overflow: hidden; }
 
/* (C) SHIFT SLIDES WITH CSS ANIMATION */
/* (C1) SLIDES POSITION */
.vmove { position: relative; bottom: 0%; }
@keyframes slidev {
  0% { bottom: 0; } 30% { bottom: 0; }
  33% { bottom: 100%; } 63% { bottom: 100%; }
  66% { bottom: 200%; } 97% { bottom: 200%; }
  100% { right: 0; }
}
 
/* (C2) MOVE SLIDES */
.vmove { animation: slidev linear 15s infinite; }
.vmove:hover { animation-play-state: paused; }

The working principles behind the vertical slider are the same as the horizontal version.

1. First, we set the outer container .vwrap and the slides .vslide to have the same width and height. This will naturally line up all the slides in a single column.
2. Similarly, we set overflow: hidden on the outer .vwrap container to hide the ugly scrollbars.
3. Finally, we use the same position: relative; bottom: N% to rotate the slides.

 

 

2C) VERTICAL SLIDER DEMO

 

2D) ADDING & REMOVING SLIDES

Adding or removing slides in the vertical version is pretty much the same as the horizontal version.

• Simply add or remove a <div class="vslide">.
• Update the CSS @keyframes slidev.
• Control the animation speed with animation: ... 20s ....

 

 

EXTRA) JAVASCRIPT TEXT SLIDER

Isn’t this tutorial supposed to be CSS only? Well, some “keyboard experts” have commented on how “dumb” keyframe calculations are. But they cannot come up with constructive suggestions and still used the above methods anyway. Duh. If you are not allergic to Javascript, here’s an alternative that may help.

 

THE HTML

<div id="demo" class="hwrap"><div class="hmove">
  <div class="hslide">...</div>
  <div class="hslide">...</div>
  <div class="hslide">...</div>
</div></div>

The HTML is the same again, just give the outer wrapper an id.

 

 

THE CSS

/* (A) FORCE SLIDES INTO SINGLE ROW */
.hmove {
  display: flex; transition: all 0.2s;
  position: relative; top: 0; right: 0;
}
.hslide { width: 100%; flex-shrink: 0; }

/* (B) OUTER WRAPPER HIDE SCROLLBAR */
.hwrap { overflow: hidden; }

No more CSS keyframes. Just arrange the slides into a horizontal row.

 

THE JAVASCRIPT

// (A) HTML ELEMENTS & SETTINGS
var outer = document.getElementById("demo"), // outside wrapper
    inner = outer.querySelector(".hmove"), // inside wrapper
    all = outer.querySelectorAll(".hslide").length, // number of slides
    wait = 5000, // 5s per slide
    now = 0; // current slide
 
// (B) SHIFT SLIDES
var timer = setInterval(() => {
  now++;
  if (now==all) { now = 0; }
  inner.style.right = `${now * 100}%`;
}, wait);

Long story short, we use JS to set right: N% on the inner wrapper automatically on intervals.

 

LINKS & REFERENCES

• CSS animation keyframes on MDN
• Examples on CodePen – Horizontal Text Slider | Vertical Text Slider

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET