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.

 

 

TUTORIAL SLIDES

 

TABLE OF CONTENTS

Download & Notes Horizontal Slider Vertical Slider
Useful Bits & Links Tutorial Video The End

 

DOWNLOAD & NOTES

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

 

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.

 

QUICK NOTES

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

 

 

HORIZONTAL TEXT SLIDER

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

 

HORIZONTAL SLIDER DEMO

Slide 1

The episode orbits? The panic overwhelms a fuse. The major lurks below the shower!

Slide 2

The lasting astronomer balances the counter reminder. The trap hires the paradox.

Slide 3

Her birthday calculates past a juice! The envy succeeds across an evident jelly.

 

HORIZONTAL SLIDER HTML 

1-horizontal.html
<div class="hwrap"><div class="hmove">
  <div class="hslide">
    <h3>Slide 1</h3>
    <p>The episode orbits? The panic overwhelms a fuse. The major lurks below the shower!</p>
  </div>
  <div class="hslide">
    <h3>Slide 2</h3>
    <p>The lasting astronomer balances the counter reminder. The trap hires the paradox.</p>
  </div>
  <div class="hslide">
    <h3>Slide 3</h3>
    <p>Her birthday calculates past a juice! The envy succeeds across an evident jelly.</p>
  </div>
</div></div>

The HTML is very simple, just sandwich the slides between 2 <div> containers.

  • <div class="hwrap"> is the main container, this is a “fixed visible area on the screen”.
  • <div class="hmove"> is the “secondary container” where we will apply CSS animation to shift the slides.
  • <div class="hslide"> are the individual slides, which will be forced into a long horizontal row with CSS.

 

 

HORIZONTAL SLIDER CSS

1-horizontal.css
/* (A) OUTER CONTAINER */
.hwrap {
  /* (A1) DIMENSIONS */
  width: 100%;
  height: 150px; /* OPTIONAL */

  /* (A2) COSMETICS */
  background: #fffdea;
  border: 2px solid #ffcf1f;
  overflow: hidden; /* HIDE SCROLLBARS */
}

/* (B) MIDDLE CONTAINER - FLEX LAYOUT */
.hmove {
  display: flex;
  position: relative;
  top: 0; right: 0;
}

/* (C) SLIDES - FORCE INTO ONE LONG HORIZONTAL ROW */
.hslide {
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 10px;
}

/* (D) SLIDE ANIMATION */
@keyframes slideh {
  /* (D0) THE IDEA - USE KEYFRAMES TO SHIFT SLIDES *
  0% { right: 0; }
  33% { right: 100%; }
  66% { right: 200%; }
  100% { right: 0; }
 
  /* (D1) BUT THE ABOVE WILL SHIFT NON-STOP */
  /* SO WE ADD PAUSES BETWEEN EACH SLIDE */
  0% { right: 0; }
  30% { right: 0; }
  33% { right: 100%; }
  63% { right: 100%; }
  66% { right: 200%; }
  97% { right: 200%; }
  100% { right: 0; }
}
.hmove { animation: slideh linear 15s infinite; }
.hmove:hover { animation-play-state: paused; }

This looks like a handful, but the whole idea is to lay the sides out in a horizontal row, then use CSS animation to rotate them.

  • .hwrap is the fixed visible area on the screen. The important parts here are setting the dimension with width: 100%, and using overflow: hidden to hide the ugly scrollbars.
  • Next, lay the slides out in a long horizontal row.
    • Set .hmove to display: flex.
    • width: 100% and flex-shrink: 0 on .hslide will force all the slides into a single row.
  • Lastly, deal with the slide rotation using CSS animation.
    • Set .hmove to position: relative – This is necessary to shift the slides.
    • Yes, some of you sharp code ninja may have already guessed – We create a sequence of @keyframes with different right: N% to rotate the slides.
    • Finally, we simply attach the keyframes to .hmove, and that’s all.

 

 

ADDING & REMOVING SLIDES

As you may have already seen, adding or removing slides is going to require a little bit of “calculation”.

  • The HTML is not so much of a problem, just add or remove a <div class="hslide">.
  • The not-so-convenient part is with the CSS, where you will have to update the @keyframes slideh.
  • Recalculate the @keyframes accordingly. So if you only 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 simply 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 ... }

 

VERTICAL TEXT SLIDER

Not to worry, the vertical text slider is not too difficult either – Just a few small tweaks to the horizontal version.

 

VERTICAL SLIDER DEMO

Slide 1

The episode orbits? The panic overwhelms a fuse. The major lurks below the shower!

Slide 2

The lasting astronomer balances the counter reminder. The trap hires the paradox.

Slide 3

Her birthday calculates past a juice! The envy succeeds across an evident jelly.

 

VERTICAL SLIDER HTML

2-vertical.html
<div class="vwrap"><div class="vmove">
  <div class="vslide">
    <h3>Slide 1</h3>
    <p>The episode orbits? The panic overwhelms a fuse. The major lurks below the shower!</p>
  </div>
  <div class="vslide">
    <h3>Slide 2</h3>
    <p>The lasting astronomer balances the counter reminder. The trap hires the paradox.</p>
  </div>
  <div class="vslide">
    <h3>Slide 3</h3>
    <p>Her birthday calculates past a juice! The envy succeeds across an evident jelly.</p>
  </div>
</div></div>

Yep, the HTML is pretty much the same as the horizontal version. The main changes are with the CSS.

 

 

VERTICAL SLIDER CSS

2-vertical.css
/* (A) SAME DIMENSIONS FOR OUTER CONTAINER & SLIDES */
.vwrap, .vslide {
  box-sizing: border-box;
  width: 100%;
  height: 150px;
}
 
/* (B) OUTER CONTAINER */
.vwrap {
  background: #ebfbff;
  border: 2px solid #a69bff;
  overflow: hidden; /* HIDE SCROLLBARS */
}
 
/* (C) MIDDLE CONTAINER */
.vmove {
  position: relative;
  bottom: 0%;
}
 
/* (D) SLIDES */
.vslide { padding: 10px; }

/* (E) SLIDE ANIMATION */
@keyframes slidev {
  /* (E0) THE IDEA - USE KEYFRAMES TO SHIFT SLIDES *
  0% { bottom: 0; }
  33% { bottom: 100%; }
  66% { bottom: 200%; }
  100% { right: 0; }
 
  /* (E1) BUT THE ABOVE WILL SHIFT NON-STOP */
  /* SO WE ADD PAUSES BETWEEN EACH SLIDE */
  0% { bottom: 0; }
  30% { bottom: 0; }
  33% { bottom: 100%; }
  63% { bottom: 100%; }
  66% { bottom: 200%; }
  97% { bottom: 200%; }
  100% { right: 0; }
}
.vmove { animation: slidev linear 15s infinite; }
.vmove:hover { animation-play-state: paused; }

The working principals behind the vertical slider are the same as the horizontal one. But this should be slightly simpler:

  • 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.
  • Similarly, we set overflow: hidden on the .vwrap main container to hide the ugly scrollbars.
  • Finally, same strategy. We add position: relative to .vmove.
  • Attach the keyframes animation to .vmove. But we will play with the bottom position to move the slides vertically instead.

 

 

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"> section.
  • Update the CSS @keyframes slidev.
  • Control the animation speed with animation: ... 20s ....

 

USEFUL BITS & LINKS

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

 

LIMITATIONS

As you can already see, maintaining this slider can be quite a hassle – If you add or remove a slide, you will have to update the keyframes and animation speed accordingly. Also, even though this simple text scroller does not have a single line of Javascript, it is also not as responsive.

The vertical slide still has a fixed height. You can try messing around with min-width and max-width, but the chances are, you will still need some sort of “CSS aspect ratio hack” to get it to work.

 

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!

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

  1. Thanks. I was trying to copy some codes randomly before, but I finally understood. Simple and concise.

  2. thank you very much – so simple – amazing – we gone use it for lots of out site – much better then a plug in 🙂

Leave a Comment

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