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

 

 

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.

 

 

 

HORIZONTAL SLIDER DEMO

 

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. 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

/* (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 SLIDER DEMO

 

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. 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

/* (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 principles 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 ....

 

 

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

• CSS animation keyframes on MDN

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET