In this small and simple tutorial, I will show you how to create pure CSS text slider which slides content automatically. It is lightweight and easy to load on any web development project.
If you are really sick of using Javascript or other over-complicated sliders then this is the best solution for you. You don’t need any extra library to add this content slideshow.
It’s quite simple and easy to create text slider and we will use the almost the same approach as we do with creating a slider for a testimonial.
I will guide walk you through how to create one with easy steps. I have included zip file with all the source code so you can download and copy-paste everything on your webpage to easily implement.
Moreover, This slider released under MIT license, So feels free to use on your personal and as well as commercial projects.
How to Create Pure CSS Text Slider Step by Step
The slider comes with stand alon textslider.css file and you need to add this file into your web docmeent to get started with creating slideshow.
<link rel="stylesheet" href="path/textslider.css">
Now let’s talk about HTML markup. There is no rocket science here, All you need to follow these simple steps:
<div id="slider">is our “main container” for the text slider which hold all the HTML.- Next We will create unorder list and define li element which will hold each slide content.
<div class="slider-container">is the “child container” in which we will do some CSS animation magic with.
<div id="slider">
<ul>
<li>
<div class="slider-container">
<h4>Pure CSS slider Content</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
</div>
</li>
<li>
<div class="slider-container">
<h4>Pure CSS slider Content</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
</div>
</li>
<li>
<div class="slider-container">
<h4>Pure CSS slider Content</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
</div>
</li>
<li>
<div class="slider-container">
<h4>Pure CSS slider Content</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
</div>
</li>
</ul>
</div>