Simple CSS Based Image Slider no Javascript

Category: Slideshow | July 17, 2018
Author: John Motyl Jr
Official Page: Go to Website
Last Update:August 1, 2023
License:MIT

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>