Lightweight Image Slider With Slide/Fade Transitions – SliderJS

Preview:

Description:

A minimal (less than 3kb) slider JavaScript plugin to create a responsive image slider with CSS slide and fade in transition effects.

How to use it:

1. Load the minified version of the SliderJS stylesheet in the header.

<link rel="stylesheet" href="css/slider.min.css" />

2. Code the HTML for the slider.

<div class="wrapper">
  <div id="slider" class="slider">
    <div id="slide1" class="slide"><img src="1.jpg" alt="" /></div>
    <div id="slide2" class="slide"><img src="2.jpg" alt="" /></div>
    <div id="slide3" class="slide"><img src="3.jpg" alt="" /></div>
  </div>
</div>

3. Add next/prev controls to the slider.

<div class="controls">
  <button id="prev-btn" class="slider-btn">prev</button>
  <button id="next-btn" class="slider-btn">next</button>
</div>

4. Load the core JavaScript file at the end of the document and done.

<script src="js/app.min.js"></script>