Simple Pure CSS Text Slider

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 match with 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 on your website.

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

One good d way to use the slideshow. It takes less space and allows you to put the different paragraph 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 following divs structure to code the slider in HTML.

  • <div id="text-slider"> is our “main wrapper” for the text slider.
  • <ul> and <li> 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>

Styling Simple Slider

Now we will style our slider to design it and make it function using CSS properties. We will 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 @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
{
	-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;
}

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 it under the MIT license so feel free to build on top of it or use in your upcoming project.

Code ExamplesYou May Also Like