DeChadou Slider

FullScreen slider with responsive images fallback

This fullscreen slider will allow you to include a full gallery with responsive fallback, navigation controls and captions. Also there are some options for enabling AutoPlay (With / Without TimeBar), Pause on Hover, etc.

Demo

http://dechadou.github.io/dechadouSlider/demo.html

How to Use

Add the CSS and JS files into your project

<link rel="stylesheet" href="css/dechadou.slider.css">
<script src="js/dechadou.slider.min.js"></script>

Add on your HTML

<section id="slider"></section>

Add on your page

<script>
    $(document).ready(function (e) {
    $('#slider').dechadouSlider();
    })
    </script>

Modify your images.json file to load your images and captions

Options:

$('#slider').dechadouSlider({
        container: '.slider',       // Set the main class of the slides container (Default: '.slider')
        jsonFile: 'images.json',    // Set the location of the json file (Default: 'images.json')
        navClass: '.controls',      // Set the main class of the controls container (Default: '.controls')
        timerBarClass: 'timer-bar', // Set the main class of the timer-bar if enabled (Default: 'timer-bar')
        enableTimerBar: true,       // enable timebar, only visible if autoplay = true (Default: 'true')
        autoplay : true,            // AutoPlay (Default: 'true')
        stopOnHover: true,          // AutoPlay stop on hover (Default: 'true')
        delay: 5000,                // Delay for AutoPlay in miliseconds (Default: '5000')
        time: 500,                  // Speed of the transition (Default: '500')
        responsive: true,           // If True, it will use the Tablet Image when the screen is below 1024px (Default: 'true')
        captions: true              // Enable or disable captions (Default: 'true')
        enableKeyboard: true        // Enable or disable keyboard support(Default: true)
});

Changelog: