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 transitions10+
Works perfect
- Opera
(tested only on 12)