Pure CSS Content Slider without Javascript

In CSS Tutorial, Slideshow Jan 6, 2017
Pure CSS Content Slider without Javascript

Have you tried our CSS Image slider? What about to make Pure CSS Content Slider? Yep, I am going to show you how to build with just a few lines of CSS.

I am not going to use the Javascript or jquery thing. Just a Basic HTML and then CSS3 will do that job. This is CSS only content slider.

It’s simple, clean and lightweight slider which allows you to easily customization by editing HTML or CSS. The slider is responsive and works well on all types of devices.

It’s well-written code slider, and it’s minimal coded one. We have seen alto of slider there which made with CSS only but what about the minimal code?

Also what about the easy to edit slides and add more or less slide. That’s the important thing to be noted in this slideshow.

How to make Pure CSS Text Slider

We simply first need to define the main wrapper and we have an ID slides is our main wrapper. It will hold the rest of HTML.

Next, we do define the radio buttons which handle the slider left or right functions. WE have four slides so here we will set four radio button with each unique ID.

<div id="slides"> <input checked type="radio" name="slider" id="slide1" class="set" /> <input type="radio" name="slider" id="slide2" class="set" /> <input type="radio" name="slider" id="slide3" class="set" /> <input type="radio" name="slider" id="slide4" class="set" /> </div> 

Just right below the radio buttons, we define a class mask and an inner div with class overflow. Both these will help later one handle with CSS.

Now we only add the four sliders and what we do need to add four divs with each class name slide. Inside these divs, we will place our text.

<div class="mask"> <div class="overflow"> <div class="slide">Slide One</div> <div class="slide">Slide Two</div> <div class="slide">Slide Three</div> <div class="slide">Slide Four</div> </div> </div> 

Just right below the div class name mask, we will add controls. These controllers allow us to change the slide on click. The controller div have four labels. These labels handle with the radio button we define above.

<div id="controls" onclick=""> <label for="slide1"></label> <label for="slide2"></label> <label for="slide3"></label> <label for="slide4"></label> </div> 

About this Pure CSS Content Slider

Have a look the demo and find the complete source code. We have just reused csscience.com slider to recreate it and make it content slider support instead of images.

Before getting implement on your live or production site, you need to make sure the browser support. It supports the wide range of browsers but doesn’t work the transitions on IE9. It also didn’t support the ~ selector on iOS5.

Hope you like this pure CSS text slider then don’t wait to share with your friends and other people. Also leave feedback, what you think about it.

Leave a Reply

Your email address will not be published. Required fields are marked *