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 May Also Like

Leave a Comment