Resonsive JSON Slideshow Plugin For jQuery - Slideshow.js

File Size: 29.1 KB
Views Total: 3343
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Resonsive JSON Slideshow Plugin For jQuery - Slideshow.js

A simple, lightweight jQuery plugin to generate a fully responsive, auto-fading image slideshow from JSON data via AJAX requests. Navigation arrows and pagination dots are supported as well.

How to use it:

1. To use this plugin, you need to load jQuery library and the slideshow plugin's JS & CSS files in the document as displayed below:

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="slideshow.js"></script>
<link rel="stylesheet" href="slideshow.css">

2. Create a container element for the slideshow and specify the path to the JSON file.

<div class="slideshow" 
     data-slide-name="Slideshow name" 
     data-slide-src="images.json">
</div>

3. Add your own image data to the JSON file following the structure like this:

{
  "width":"100%",
  "height":"100%",
  "slides":[
    {"img":{"src":"1.png","width":"100%","height":"100%"}},
    {"img":{"src":"2.png","width":"100%","height":"100%"}},
    {"img":{"src":"3.png","width":"100%","height":"100%"}}
  ]
}

This awesome jQuery plugin is developed by Dequilla. For more Advanced Usages, please check the demo page or visit the official website.