Lightweight Image Slider With Slide/Fade Transitions – SliderJS

Category: Javascript , Slider | November 20, 2019
Author:iClusterDev
Views Total:2,818 views
Official Page:Go to website
Last Update:November 20, 2019
License:MIT

Preview:

Lightweight Image Slider With Slide/Fade Transitions – SliderJS

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>

You Might Be Interested In:


Leave a Reply