Pure CSS Image Slider without Javascript

Here is another example of pure CSS image slider without javascript or JS. It is a simple photo slider which has all the options which any Js slideshow have. It has both dots and arrow navigations which allow sliding the images.

It supports a wide range of browsers and easy to implement on any kind of website. You can easily customize it as per your design need. Let’s build a nice looking slider in no time.

Create Pure CSS Image Slider without Javascript

To implement, simply include the CSS stylesheet at the end of head element:

<link rel="stylesheet" href="/path/to/csslider.css" />

Put the following code to add the slider to your webpage.

<div class="csslider">
     <input type="radio" name="slides" id="slides_1" checked />
     <input type="radio" name="slides" id="slides_2" />
     <input type="radio" name="slides" id="slides_3" />
     <input type="radio" name="slides" id="slides_4" />
     <input type="radio" name="slides" id="slides_N" />
     <ul>
         <li>Content of slide 1</li>
         <li>Content of slide 2</li>
         <li>Content of slide 3</li>
         <li>Content of slide 4</li>
         <li>Content of slide N</li>
     </ul>
     <div class="arrows">
         <label for="slides_1"></label>
         <label for="slides_2"></label>
         <label for="slides_3"></label>
         <label for="slides_4"></label>
         <label for="slides_N"></label>
         <label for="slides_1" class="goto-first"></label>
         <label for="slides_N" class="goto-last"></label>
     </div>
     <div class="navigation">
 	    <div>
         	<label for="slides_1"></label>
         	<label for="slides_2"></label>
         	<label for="slides_3"></label>
         	<label for="slides_4"></label>
         	<label for="slides_N"></label>
 	    </div>
     </div>
 </div>

The slider work for both image and text. Place images or content inside the unordered list li.

Slider Browsers Support

• Chrome (tested only on 30)
• Firefox (tested only on 24)
• IE
  • 9 No transitions
  • 10+ Works perfect
• Opera (tested only on 12)