Simple Pure CSS Text Slider

Our today tutorial about creating simple pure CSS text slider which works automatically. It is a responsive and lightweight slideshow which don’t need extra libraries.

Are sick of those complicated and slow sliders which need jQuery and extra libraries. Let’s try out our Pure CSS Content Slider which is pretty simple, responsive, cross-browser compatible and work well with mobile devices.

Furthermore, you can create your own slider and customize it to match your website design. You can change its background, apply different font-family and change its layout.

In addition, If you are really interested in arranging the content in a good manger and looking for a lightweight solution for this then simply download the source code of this slider and implement it on your website.

There are many ways to arrange the content which looks nice and provides a great user experience.

One good d way to use the slideshow. It takes less space and allows you to put the different paragraphs of content in one place and by using arrow navigation user can slide it to see the next part of the content.

Start with Text Slider Markup

The slider comes with simple and easy markup. There is no rocket science. We have the following divs structure to code the slider in HTML.

  • <div id="text-slider"> is our “main wrapper” for the text slider.
  • <ul> and <li> the structure uses to create each slide.
  • <div class="text-slider-container"> is the “secondary container” in which we have placed the plain text by using HTML tags such as P, H or Span, etc.
<div id="text-slider">
    <ul>
        <li>
        <div class="text-slider-container">
        	<h4>Heading text</h4>
            <p>simple content goes here</p>
        	<h5>may be some Additional heading</h5>
        </div>
        </li>
         <li>
        <div class="text-slider-container">
        	<h4>Heading text</h4>
            <p>simple content goes here</p>
        	<h5>may be some Additional heading</h5>
        </div>
        </li>
        
        <li>
            <div class="text-slider-container">
            	<h4>Amazed by the fast, accurate workmanship</h4>
            	<p>“You guys rock… seriously! Thank you so much for getting all those stamps back to me so fast! Wow!”</p>
            	<h5>- Tina</h5>
            </div>
        </li>     
        <li>
            <div class="text-slider-container">
            	<h4>My stamps are fantastic</h4>
            	<p>	“I received the stamps this week and they are fantastic. Thanks so much for your work on perfecting them!”</p>
            	<h5>- Amanda</h5>
            </div>
        </li>
    </ul>
</div>

CSS for Text Slider

Now we will style our slider to design it and make it functional using CSS attributes. We’ll start with basic CSS and apply height for container and ul element.

There are few more general styles need to make work the slider and these are width, background, color, and font-family, etc.

#text-slider, ul
{
    height: 300px;
}
#text-slider
{
	margin: auto;
	overflow: hidden;
	background:#f4f4f4;
	position: relative;
	max-width: 600px;
}
#text-slider li
{
	float: left;
	position: relative;
	width: 600px;
	display: inline-block;
	height: 200px;
}
#text-slider ul
{
	list-style: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 9000px;
	transition: left .3s linear;
	-moz-transition: left .3s linear;
	-o-transition: left .3s linear;
	-webkit-transition: left .3s linear;
	margin-left: -25px;
     font-family: century gothic;
     color: #666;
}

Next, we will take care of secondary container which is for content and place inside each li.

.text-slider-container
{
	margin: 0 auto;
	padding: 0;
	width: 550px;
  min-height: 180px;
}
.text-slider-container h4
{
  font-family: 'Work sans', sans-serif;
 	color: #000;
  font-weight:400;
  font-size: 20px;
}
.text-slider-container h5 {
	text-align: right;
	font-weight:normal;
	font-family: 'Questrial', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
  color:#EE2D24;
}
.text-slider-container  p
{
  text-indent: 40px;
	font-family: 'Questrial', sans-serif;
	font-size: 15px;
	color: #434343;
	line-height: 200%;
	margin:0 auto 0 auto;
	margin: 10px 25px;
	text-align: justify;
}

Finally, the CSS @keyframes will help us to create the slide animation.

@-webkit-keyframes slide-animation {
	0% {opacity:0;}
	2% {opacity:1;}
	20% {left:0px; opacity:1;}
	22.5% {opacity:0.6;}
	25% {left:-600px; opacity:1;}
	45% {left:-600px; opacity:1;}
	47.5% {opacity:0.6;}
	50% {left:-1200px; opacity:1;}
	70% {left:-1200px; opacity:1;}
	72.5% {opacity:0.6;}
	75% {left:-1800px; opacity:1;}
	95% {opacity:1;}
	98% {left:-1800px; opacity:0;} 
	100% {left:0px; opacity:0;}
}

#text-slider ul
{
         animation: slide-animation 25s infinite;
	-webkit-animation: slide-animation 25s infinite;
}
/* use to pause the content on mouse over */
#text-slider ul:hover
{
	-moz-animation-play-state: paused;
	-webkit-animation-play-state: paused;
}

The “animation: slide-animation 25s infinite”  define the animation name and its delay time. I have used 25s after that the next slide will be shown. You can set custom time instead of this according to your need.  You can also know about how CSS animation works.

And that’s it. The slider is ready to use. You can freely download the source code and check out a demo. I have released “pure CSS text slider” under the MIT license so feel free to build on top of it or use it in your upcoming project.

You Might Be Interested In:

Ashfaq Ahmed is a freelance WordPress developer and owner of codeconvey.com. I developed modern and highly interactive websites. I always focus on improving my development and design skills.

9 thoughts on “Simple Pure CSS Text Slider”

  1. Hi
    Great example, thanks!

    At the end of the slider circuit it looks like the slides are ‘refreshing’ rather than sliding from the last slide to the first slide.

    What do I need to do to the animation to change this please?

    thanks very much 🙂

    • Hi Jackie!
      You can remove the fading effect by changing the opacity value (that is 0) from the last two keyframes. Simply write 1 instead of 0 for the opacity.

      	98% {left:-1800px; opacity: 1;} 
      	100% {left:0px; opacity: 1;}
      
    • You are welcome! Keep visiting us for more HTML, CSS, JS code snippets.

  2. Very nice, useful. please can you add next and previous buttons

  3. Useful snippets.
    What would be the code for three slides as the current CSS code is creating a fourth blank slide when I use only 3 elements?

Comments are closed.