Lightweight Image Slider With Slide/Fade Transitions – SliderJS

Category: Javascript , Slider | November 20, 2019
Author: iClusterDev
Views Total: 367
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