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

 

DOWNLOAD & NOTES

First, here is the download link to the example source code as promised.

 

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.

 

 

TEXT SLIDERS

All right, let us now start with a horizontal text slider (that scrolls right to left).

 

1) HORIZONTAL TEXT SLIDER

1A) HORIZONTAL SLIDER HTML 

1a-horizontal.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

1b-horizontal.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

Slide 1

The episode orbits? The panic overwhelms a fuse.

Slide 2

The lasting astronomer balances the counter reminder.

Slide 3

Her birthday calculates past a juice!

 

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

2a-vertical.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

2b-vertical.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

Slide 1

The episode orbits? The panic overwhelms a fuse.

Slide 2

The lasting astronomer balances the counter reminder.

Slide 3

Her birthday calculates past a juice!

 

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 BITS & LINKS

That’s it for the tutorial, and here is a small extra that may be useful.

 

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

3a-js.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

3b-js.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

3c-js.js
// (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

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

CSS Text Slider (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this short guide. I hope that it has helped you to create a better website, and if you have anything to add to this guide, please feel free to comment below. Good luck and happy coding!

9 thoughts on “Simple Responsive Pure CSS Text Slider (Horizontal & Vertical)”

Leave a Comment

Your email address will not be published. Required fields are marked *