This time I will share jQuery Plugin and tutorial about Resonsive JSON Slideshow Plugin For jQuery – Slideshow.js, hope it will help you in programming stack.
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:
1 |
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> |
2 |
<script src="slideshow.js"></script> |
3 |
<link rel="stylesheet" href="slideshow.css"> |
2. Create a container element for the slideshow and specify the path to the JSON file.
3 |
data-slide-src="images.json"> |
3. Add your own image data to the JSON file following the structure like this:
5 |
{"img":{"src":"1.png","width":"100%","height":"100%"}}, |
6 |
{"img":{"src":"2.png","width":"100%","height":"100%"}}, |
7 |
{"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.
