Simple CSS Based Image Slider no Javascript

Category: Slideshow | July 17, 2018
Simple CSS Based Image Slider
Author: John Motyl Jr
Official Page: Go to Website
Last Update:April 26, 2019

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">
    <li id="no-js-slider-1" class="slide">
      <img src="">
      <a class="prev" href="#no-js-slider-10">prev</a>
      <a class="next" href="#no-js-slider-2">next</a>
    <li id="no-js-slider-2" class="slide">
      <img src="">
      <a class="prev" href="#no-js-slider-1">prev</a>
      <a class="next" href="#no-js-slider-3">next</a>           
    <li id="no-js-slider-3" class="slide">
      <img src="">
      <a class="prev" href="#no-js-slider-2">prev</a>
      <a class="next" href="#no-js-slider-4">next</a>           
    <li id="no-js-slider-4" class="slide">
      <img src="">
      <a class="prev" href="#no-js-slider-3">prev</a>
      <a class="next" href="#no-js-slider-5">next</a>          


You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.