JSON Based Dynamic jQuery Image Slider Plugin - JSONslider

JSONslider is a jQuery slideshow plugin that generates an auto-fading image slider from a JSON data source including image sources, captions and copyright information. So that you can dynamically add/remove images into the slideshow without the need of modifying the html markup of your webpage. The plugin is licensed under the GPLv2.

How to use it:

1. Create an empty container to place the image slider.

<div class="slider"></div>

2. Add your images into a JSON file as follows:

{
  "pictures": [
    {
      "url": "1.jpg",
      "alt": "Alt 1",
      "caption": "Caption 1",
      "copyright":"Copyright 1"
    },
    {
      "url": "2.jpg",
      "alt": "Alt 2",
      "caption": "Caption 2",
      "copyright":"Copyright 2"
    },
    {
      "url": "3.jpg",
      "alt": "Alt 3",
      "caption": "Caption 3",
      "copyright":"Copyright 3"
    }
  ]
}

3. Load jQuery library and the jQuery JSONslider plugin at the end of the document.

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script> 
<script src="jquery.jsonslider.js"></script> 

4. Initialize the plugin and specify the path to the JSON file.

$( '.slider' ).jsonSlider({
  json: 'demo.json',
});

5. You can use the the option Class to set an additional class to the active element.

$( '.slider' ).jsonSlider({
    json: 'demo.json',
    Class: 'slider-active'
});

6. Full plugin options.

json: undefined,
Class: 'slider-active',

// aspect ratio of the slider. 
// Chose it according to pictures aspect ratio.
aspectRatio: '16:9',

// default CSS styles
css: {
  parent: {
    position: 'relative'
  },
  wrap: {
    position: 'relative',
    width: '100%',
    height: '100%',
    margin: '0 auto',
    padding: 0,
    backgroundColor: 'inherit',
    overflow: 'hidden'
  },
  figure: {
    position: 'absolute'
  },
  img: {
    width: 'auto',
    maxWidth: '100%',
    lineHeight: 0,
    margin: '0 auto'
  }
}

Change log:

v1.0.0 (2017-12-11)

• update to commonjs/AMD

v0.3.0 (2015-05-02)

• added aspectRatio option

---

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