Pure CSS Content Slider without Javascript

Today, I’m going to create pure CSS content slider without JavaScript. Now, you don’t need to arrange a lot of JS scripts or slider contents. I’ll explain each necessary step to get it working.

You don’t need to provide any fallback or other scripts to handle its functionality. It built with simple CSS3 techniques.

Adding a lot of content on the page to let the user scroll and scroll isn’t a good idea. Instead of doing this, it’s better to arrange the text in a better way.

One of the ways to arrange photos or content is to use the auto play slideshow or a content slider.

I am not going to use the JavaScript or jQuery library. Just a Basic HTML and then CSS3 will do that job. This is CSS only content slider which doesn’t need any kind of script.

It’s plain, 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 is a mobile-friendly slider and supports almost all the browsers.

It’s well-written coded simple pure CSS text slider, and it’s minimal coded one. We have seen a lot slider there which made with CSS only but what about the minimum 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.

Pure CSS Content Slider without JavaScript

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.

The Markup

<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 plain 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 has four labels. These labels handle with the radio button we defined above.

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

Have a look at 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 text slideshow then don’t wait to share with your friends and other people. Also leave feedback, what you think about it.

You Might Be Interested In: