CSS-slider

This is Horizontal Slider implemented using CSS & Javascript. You can easily use it in your application by following some simple steps. You can create slider for anything you want by using same css classes.

---

How to use it :-

• Import the css file into your html page :-

  <link rel="stylesheet" href="https://ayanshaikh18.github.io/css-slider/slider.css" />

• Add reference to the js file before the end of body tag :-

  <script src="https://ayanshaikh18.github.io/css-slider/slider.js"></script>

• Follow the html structures as described below :-

  <div class="slider-container">
    <div class="slider-element">
      <!-- Code for your html tags -->            
    </div>
    
    <div class="slider-element">
      <!-- Code for your html tags -->            
    </div>
    .
    .
    .
    <div class="slider-element">
      <!-- Code for your html tags -->            
    </div>
  </div>
    

---

• In order to customize width of any slider-element, provide custom value to min-width propery of that slider-element.

Demo

For demo and use cases, refer this file.

Live

Demo is running live here.

Codepen Link :-

https://codepen.io/ayanshaikh18/pen/QWppzwa