Minimal Image Slideshow With Plain JavaScript – swdslideshow

Preview:

Description:

swdslideshow is a minimal, fast, responsive slideshow JavaScript library designed to fade through images in a simple and intuitive manner.

How to use it:

1. Add the swdslideshow.css and swdslideshow.js files to the page.

<link rel=”stylesheet” href=”css/swdslideshow.css” />
<script src=”js/swdslideshow.js”></script>

2. Add images as backgrounds to the slideshow.

div id="swd-slideshow">
  <div style="background-image: url('1.jpg')"></div>
  <div style="background-image: url('2.jpg')"></div>
  <div style="background-image: url('3.jpg')"></div>
</div>

3. Config the slideshow with the following parameters:

• slide_interval: time to wait before transitioning to the next image
• transition_duration: duration of the animation
• autoplay: enable/disable Autoplay

let settings = {
    slide_interval: 5000,
    transition_duration: 750,
    autoplay: true
};