Lightweight Image Slider With Slide/Fade Transitions – SliderJS

Category: Javascript , Slider | November 20, 2019
Views Total:2,781 views
Official Page:Go to website
Last Update:November 20, 2019


Lightweight Image Slider With Slide/Fade Transitions – SliderJS


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>

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>

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

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

You Might Be Interested In:

Leave a Reply