It is a simple CSS based image slider without any Javascript. It is fully responsive and can be converted into a fullscreen slideshow by just removing the container.
The slider comes with easy to use markup. It consists of a div and unorders list and each image place inside li
.
You can place a slider stylesheet and HTML markup to add it on your website. It supports wide-range of browsers and compatible with mobile devices.
The slider comes with left/right arrow navigations which allow changing each slide. The slider doesn’t have any animation but if you are looking for animated slider then have a look pure CSS image slider which also builds with the only CSS.
How to Add Image Slider
Add the slider.css file in the document.
<link rel="stylesheet" type="text/css" href="slider.css" />
The HTML is so easy which can be defined with slider class and then define the unordered list. You can define up to 10 images.
<div class="slider"> <ul> <li id="no-js-slider-1" class="slide"> <img src="https://lh3.googleusercontent.com/-PcDDGh9C6Uk/UUoRYu8TmGI/AAAAAAAAADk/bVCVnUEott4/s1231/2.jpeg.jpg"> <a class="prev" href="#no-js-slider-10">prev</a> <a class="next" href="#no-js-slider-2">next</a> </li> <li id="no-js-slider-2" class="slide"> <img src="https://lh5.googleusercontent.com/-ImESS5vXwTQ/UUoRZtDDdwI/AAAAAAAAAD0/mBlvPxXMuDU/s1231/3.jpeg.jpg"> <a class="prev" href="#no-js-slider-1">prev</a> <a class="next" href="#no-js-slider-3">next</a> </li> <li id="no-js-slider-3" class="slide"> <img src="https://lh3.googleusercontent.com/-a4HykmTjnLw/UUoRZ9AOzNI/AAAAAAAAAD8/bsVqg8naI2o/s1231/4.jpeg.jpg"> <a class="prev" href="#no-js-slider-2">prev</a> <a class="next" href="#no-js-slider-4">next</a> </li> <li id="no-js-slider-4" class="slide"> <img src="https://lh5.googleusercontent.com/-lmIWz4ADxc0/UUoRaFjdNXI/AAAAAAAAAEI/widPZMMiBVM/s1231/5.jpeg.jpg"> <a class="prev" href="#no-js-slider-3">prev</a> <a class="next" href="#no-js-slider-5">next</a> </li> </ul> </div>