JSONslider is a simple jQuery slider for pictures stored dynamically in a JSON file you can edit without messing up your HTML.
JavaScript
Latest commit b0c5f23 May 1, 2015 @dcdeiv v0.3.0
Permalink
Failed to load latest commit information.
LICENSE Initial commit Apr 30, 2015
README.md
bower.json v0.3.0 May 1, 2015
jquery.jsonslider.js v0.3.0 May 1, 2015
jquery.jsonslider.min.js v0.3.0 May 1, 2015
store.json changed links Apr 30, 2015

README.md

JSONslider

JSONslider is a simple jQuery slider for pictures stored dynamically in a JSON file you can edit without messing up your HTML..


Flattr this


This is a beta version, it has not been fully tested

DOWNLOAD

  • Git: $ git https://github.com/dcdeiv/jsonslider.git
  • Bower: $ bower install jsonslider

SET UP

1 - Set up the JSON file

The JSON file must have at least these names and values:

{ "pictures": [
  {
    "url" : "path-to-picture-1",
    "alt" : "A little description"
  }
] }

Repeat for other pictures. In the store.json file you will find along with the plug-in, is just an example of a *.json file. Other names in that file are just for storing more information.

2 - Set HTML tag

Give a unique ID or a class to an empty <div> in your HTML:

3 - Run the function

This is an example of how the function must be called with all available options.

$( document ).ready(function() {
    $( '.your-class' ).jsonSlider({
        json: 'path-to-your-json-file.json',
        Class: 'slider-active', //default class
        aspectRatio: '16:9', //aspect ratio of the slider. Chose it according to pictures aspect ratio.
        css: { //don't touch these parametres
            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'
            }
        }
    });
});

For compatibility issues I added the option Class that lets you set a custom class to call the active element. By default the class is 'slider-active.