Minimal Image Slideshow With Plain JavaScript – swdslideshow

Category: Javascript , Slideshow | December 28, 2020
Author: clhettiarachchi
Views Total: 326 views
Official Page: Go to website
Last Update: December 28, 2020
License: MIT

Preview:

Minimal Image Slideshow With Plain JavaScript – swdslideshow

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
};

You Might Be Interested In:


One thought on “Minimal Image Slideshow With Plain JavaScript – swdslideshow

  1. Anna

    Hi! Love the script, it was just what I was looking for. However, while doing my testing phase for a site rollout I noticed the script doesn’t work at all with Internet Explorer. I really hope a lot of people aren’t using IE at all anymore, but if they are…any idea of how to fix it and make it show up? I have scripting turned on and other JS on sites seems to work fine, but not this one…

    Reply

Leave a Reply