2 Steps Simple Responsive Text Slider In Pure CSS

INTRODUCTION
NO FRILLS SLIDES

Welcome to a tutorial on how to create a simple pure CSS text slider. 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 how to create one – Read on to find out!

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

 

 

 

PREAMBLE
SOURCE CODE DOWNLOAD

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

 

SOURCE 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

There is nothing to install, so just download and unzip into a folder. 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.

 

SECTION A
HORIZONTAL TEXT SLIDER

Let us start with a horizontal text slider (that scrolls right to left).

 

STEP 1) THE HTML

1-horizontal.html
<div class="s-wrap"><div class="s-move">
  <div class="slide">
    <h3>Slide 1</h3>
    <p>
      The episode orbits? The panic overwhelms a fuse. The major lurks below the shower! The tactic founds the nut. Why can't a pardon toss the sexist exercise?
    </p>
  </div>
  <div class="slide">
    <h3>Slide 2</h3>
    <p>
      The lasting astronomer balances the counter reminder. The trap hires the paradox. The employer watches the laser next to the exhausted historian. The water oils a breakfast.
    </p>
  </div>
  <div class="slide">
    <h3>Slide 3</h3>
    <p>
      Her birthday calculates past a juice! The envy succeeds across an evident jelly. An afternoon shifts opposite a bust. The tired clash divides a widest sneak. The satire springs onto a misfortune after the inclined car.
    </p>
  </div>
  <div class="slide">
    <h3>Slide 4</h3>
    <p>
      A distributed actor pilots the null pencil. The wild wolfs a damp cage inside the breach. The blank toes the line underneath the arc. The sheep migrates within the transcript.
    </p>
  </div>
  <div class="slide">
    <h3>Slide 5</h3>
    <p>
      The suspected book hums opposite the unacceptable urge. The warning goodbye searches the substitute. This damp loses before the president. The slave elects the north inside an exciting salt.
    </p>
  </div>
</div></div>

Yep, there is no rocket science here:

  • <div class="s-wrap"> is the “main container” for the text slider.
  • <div class="s-move"> is the “secondary container” in which we will do some CSS animation magic to create the slide effect.
  • Finally, <div class="slide"> are the individual slides.

 

 

STEP 2) THE CSS

1-horizontal.css
/* OUTER CONTAINER */
.s-wrap {
  width: 100%;
  height: 200px; /* Optional */
  background: #ffd7d1;
  border: 1px solid #9c1e0b;
  overflow: hidden; /* Hide scrollbars */
}

/* MIDDLE WRAPPER */
.s-move {
  display: flex;
  position: relative;
  top: 0;
  right: 0;
}

/* SLIDES */
.slide {
  box-sizing: border-box;
  padding: 10px;
  /* Force all slides to layout horizontally */
  width: 100%;
  flex-shrink: 0; 
}

/* SLIDE ANIMATION MAGIC */
@keyframes slideh {
  /* Will use keyframes to shift the 5 slides *
  0% { right: 0; }
  20% { right: 100%; }
  40% { right: 200%; }
  60% { right: 300%; }
  80% { right: 400%; }
  100% { right: 0; }*/
  /* BUT the above will be non-stop */
  /* We want short pauses between each slide, so... */
  0% { right: 0; }
  15% { right: 0; }
  20% { right: 100%; }
  35% { right: 100%; }
  40% { right: 200%; }
  55% { right: 200%; }
  60% { right: 300%; }
  75% { right: 300%; }
  80% { right: 400%; }
  95% { right: 400%; }
  100% { right: 0; }
}
.s-move { animation: slideh linear 25s infinite; }
.s-move:hover { animation-play-state: paused; }

Confused? Here’s how it works in a nutshell:

  • First, we set the inner container .s-move to display: flex.
  • Following up, when we define width: 100% and flex-shrink: 0 on.slide, this will force all the slides to align in a long horizontal row. Yes, even out of the screen.
  • This is where we set the width and height of the outer container .s-wrap, give it overflow: hidden to hide the scrollbars.
  • With that, the basics are pretty much set. All that’s left is to deal with the sliding animation – We start by adding position: relative to .s-move.
  • Yes, some of you sharp code ninja may have already guessed – Changing right: N% on .s-move will literally “change which slides to show”.
  • So finally, we need some CSS animations magic. Create a sequence of @keyframes to move through the slides, simply attach it .s-move, and that’s the end.

 

 

DEMO

Slide 1

The episode orbits? The panic overwhelms a fuse. The major lurks below the shower! The tactic founds the nut. Why can’t a pardon toss the sexist exercise?

Slide 2

The lasting astronomer balances the counter reminder. The trap hires the paradox. The employer watches the laser next to the exhausted historian. The water oils a breakfast.

Slide 3

Her birthday calculates past a juice! The envy succeeds across an evident jelly. An afternoon shifts opposite a bust. The tired clash divides a widest sneak. The satire springs onto a misfortune after the inclined car.

Slide 4

A distributed actor pilots the null pencil. The wild wolfs a damp cage inside the breach. The blank toes the line underneath the arc. The sheep migrates within the transcript.

Slide 5

The suspected book hums opposite the unacceptable urge. The warning goodbye searches the substitute. This damp loses before the president. The slave elects the north inside an exciting salt.

 

ADDING & REMOVING SLIDES

As you might 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="slide">.
  • 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
  • The simply add the pauses in-between.
    • 20% - right: 0
    • 45% - right: 100%
    • 70% - right: 200%
    • 95% - right: 300%
  • Lastly, you might also want to tweak the animation time to speed up or slow down – .s-move { animation: ... 25s ... }

 

SECTION B
VERTICAL TEXT SLIDER

With the horizontal text slider, we can simply do a small tweak to the CSS and turn it into a vertical text slider.

 

STEP 1) THE HTML

2-vertical.html
<div class="s-wrap"><div class="s-move">
  <div class="slide">
    <h3>Slide 1</h3>
    <p>
      The episode orbits? The panic overwhelms a fuse. The major lurks below the shower! The tactic founds the nut. Why can't a pardon toss the sexist exercise?
    </p>
  </div>
  <div class="slide">
    <h3>Slide 2</h3>
    <p>
      The lasting astronomer balances the counter reminder. The trap hires the paradox. The employer watches the laser next to the exhausted historian. The water oils a breakfast.
    </p>
  </div>
  <div class="slide">
    <h3>Slide 3</h3>
    <p>
      Her birthday calculates past a juice! The envy succeeds across an evident jelly. An afternoon shifts opposite a bust. The tired clash divides a widest sneak. The satire springs onto a misfortune after the inclined car.
    </p>
  </div>
  <div class="slide">
    <h3>Slide 4</h3>
    <p>
      A distributed actor pilots the null pencil. The wild wolfs a damp cage inside the breach. The blank toes the line underneath the arc. The sheep migrates within the transcript.
    </p>
  </div>
  <div class="slide">
    <h3>Slide 5</h3>
    <p>
      The suspected book hums opposite the unacceptable urge. The warning goodbye searches the substitute. This damp loses before the president. The slave elects the north inside an exciting salt.
    </p>
  </div>
</div></div>

Yep, this is pretty much the same… Just some changes in the CSS.

 

 

STEP 2) THE CSS

2-vertical.css
/* SAME DIMENSION FOR CONTAINER + SLIDES */
.v-wrap, .v-slide {
  box-sizing: border-box;
  width: 100%;
  height: 200px;
}
 
/* OUTER CONTAINER */
.v-wrap {
  background: #ffd7d1;
  border: 1px solid #9c1e0b;
  overflow: hidden; /* Hide scrollbars */
}
 
/* MIDDLE WRAPPER */
.v-move {
  position: relative;
  bottom: 0%;
}
 
/* SLIDES */
.v-slide { padding: 10px; }

/* SLIDE ANIMATION MAGIC */
@keyframes slidev {
  /* Will use keyframes to shift the 5 slides *
  0% { bottom: 0; }
  20% { bottom: 100%; }
  40% { bottom: 200%; }
  60% { bottom: 300%; }
  80% { bottom: 400%; }
  100% { right: 0; }
 
  /* BUT the above will be non-stop */
  /* We want short pauses between each slide, so... */
  0% { bottom: 0; }
  15% { bottom: 0; }
  20% { bottom: 100%; }
  35% { bottom: 100%; }
  40% { bottom: 200%; }
  55% { bottom: 200%; }
  60% { bottom: 300%; }
  75% { bottom: 300%; }
  80% { bottom: 400%; }
  95% { bottom: 400%; }
  100% { bottom: 0; }
}
.v-move { animation: slidev linear 25s infinite; }
.v-move: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 .v-wrap and the slides .v-slide 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 .v-wrap main container to hide the ugly scrollbars.
  • Finally, same strategy. We add position: relative to .v-move.
  • Attach the keyframes animation to .v-move. But we will play with the bottom position to move the slides vertically instead.

 

 

DEMO

Slide 1

The episode orbits? The panic overwhelms a fuse. The major lurks below the shower! The tactic founds the nut. Why can’t a pardon toss the sexist exercise?

Slide 2

The lasting astronomer balances the counter reminder. The trap hires the paradox. The employer watches the laser next to the exhausted historian. The water oils a breakfast.

Slide 3

Her birthday calculates past a juice! The envy succeeds across an evident jelly. An afternoon shifts opposite a bust. The tired clash divides a widest sneak. The satire springs onto a misfortune after the inclined car.

Slide 4

A distributed actor pilots the null pencil. The wild wolfs a damp cage inside the breach. The blank toes the line underneath the arc. The sheep migrates within the transcript.

Slide 5

The suspected book hums opposite the unacceptable urge. The warning goodbye searches the substitute. This damp loses before the president. The slave elects the north inside an exciting salt.

 

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="slide"> section.
  • Update the CSS @keyframes slideh.
  • Control the animation speed with animation: ... 25s ....

 

EXTRA
USEFUL BITS

That’s it for all the code, 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 hack” to get it to work.

 

 

LINKS & REFERENCES

 

EXTRA
VIDEO TUTORIAL

For you guys who want more, here’s the video tutorial, and shameless self-promotion – Subscribe to the Code Boxx YouTube channel for more!

 

YOUTUBE TUTORIAL

 

INFOGRAPHIC CHEAT SHEET

CSS Text Slider (click to enlarge)

 

CLOSING
WHAT’S NEXT?

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!


1 thought on “2 Steps Simple Responsive Text Slider In Pure CSS”

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