Find file
Fetching contributors…
Cannot retrieve contributors at this time
73 lines (57 sloc) 2.06 KB


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


  • Git: $ git
  • Bower: $ bower install jsonslider


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.