JbhSlider, the simple way to slide

Default slider

This slider is the default configuration.

HTML

<div id="default_slider">
  <ul>
    <li><img src="http://placehold.it/500x250" /></li>
    <li><img src="http://placehold.it/500x250" /></li>
    <li><img src="http://placehold.it/500x250" /></li>
  </ul>
</div>

Javascript

jQuery('#default_slider').jbhSlider();

Be simple, just slide

This slider is a little bit configurated.

1. Timer to 5 seconds
2. Slide duration to 0.5 second
3. Horizontal slide
4. Simple pagination
5. 3 loops

HTML

<div id="simple_slider">
  <ul>
    <li><img src="http://placehold.it/500x250" /></li>
    <li><img src="http://placehold.it/500x250" /></li>
    <li><img src="http://placehold.it/500x250" /></li>
  </ul>
</div>

Javascript

jQuery('#simple_slider').jbhSlider({
    transition: {
        type: 'horizontal-left',
        duration: 500,
        timer: 5000,
        repeat: 3
    },
    pagination: {
        type: 'bullets'
    }
});

Perfect control

This slider is a little bit configurated.

1. No timer
2. Slide duration to 2 seconds
3. Horizontal slide
4. No navigation
5. Default & custom pagination

HTML

<div id="control_slider">
  <ul>
    <li><img src="http://placehold.it/500x250" /></li>
    <li><img src="http://placehold.it/500x250" /></li>
    <li><img src="http://placehold.it/500x250" /></li>
  </ul>
</div>
<ul id="control_navigation">
    <li><a href="#" rel="1"><img src="http://placehold.it/30x20" /></a></li>
    <li><a href="#" rel="2"><img src="http://placehold.it/30x20" /></a></li>
    <li><a href="#" rel="3"><img src="http://placehold.it/30x20" /></a></li>
</ul>

Javascript

jQuery('#control_slider').jbhSlider({
    init: function (slider) {
        jQuery('#control_navigation a').click(function () {
            slider.jbhSlider('slide', jQuery(this).attr('rel'));
            return false;
        });
    },
    transition: {
        type: 'horizontal-left',
        duration: 2000,
        timer: -1
    },
    pagination: {
        type: 'bullets'
    },
    navigation: {
        active: false
    }
});

Triggers

With JbhSlider, you can custom easily all triggered actions.

Before slide, on success slide or simply for the slider initialization.

Default settings

var settings = {
    init: function (slider) {},
    selector: '> ul',
    cssClass: 'jbhSlider',
    elements: {
        selector: '> li',
        cssClass: 'jbhSliderItem'
    },
    css: {
        width: 500,
        height: 250
    },
    transition: {
        type: 'fade',
        duration: 1000,
        timer: 3000,
        actionStopTimer: true,
        before: function (slider, to, transition) {transition();},
        success: function (slider, to) {},
        maxZIndex: 300,
        repeat: -1
    },
    pagination: {
        type: null,
        text: '{{page}}',
        cssClass: 'jbhSliderPages',
        id: null,
        currentCssClass: 'current',
        tag: 'ol',
        subTag: 'li',
        position: 'after',
        container: null
    },
    navigation: {
        active: true,
        cssClass: 'jbhSliderNavigation',
        id: null,
        loop: true,
        tag: 'ul',
        subTag: 'li',
        next: {
            text: '>',
            cssClass: 'jbhSliderNavigationNext'
        },
        previous: {
            text: '<',
            cssClass: 'jbhSliderNavigationPrevious'
        },
        position: 'after',
        container: null
    }
};

The different settings

var settings = {
    init: function (slider) {}, // Method call on slider loading
    transition: {
        before: function (slider, to, transition) {transition();}, // Method call before sliding
        success: function (slider, to) {} // Method call after sliding
    }
};

var settings = {
    elements: {
        selector: '> li', // Selector wich permits to reach the second level. The class "current" will be applied. Can be NULL.
        cssClass: 'jbhSliderItem' // CSS class applied to slides
    }
};

var settings = {
    css: {
        width: 500, // Slider width
        height: 250 // Slider height
        // You can add every CSS properties wich will be applied to slides and slider.
    }
};

var settings = {
    transition: {
        type: 'fade', // It can be : horizontal-left or horizontal-right
        duration: 1000, // Effect duration
        timer: 3000, // Time between two slides, put -1 for disable the automatic sliding
        actionStopTimer: true, // Indicate if a simple clic stops the automatic sliding
        before: function (slider, to, transition) {transition();}, // Method call before sliding (trigger section)
        success: function (slider, to) {}, // Method call after sliding (trigger section)
        maxZIndex: 300, // Count for maximum z-index for the fade effect. The z-index is reset when the limit is exceeded
        repeat: -1 // How many loops (-1 = no limit)
    }
};

var settings = {
    pagination: {
        type: null, // Can be : numbers, bullets, custom
                    // NULL    : No pagination
                    // numbers : displays "1 2 3 4"
                    // bullets : displays "• • • •"
                    // custom  : displays "1 2 3 4" by default
        text: '{{page}}', // Text used with the "custom" pagination type
        cssClass: 'jbhSliderPages', // CSS class applied to the pagination
        id: null, // id applied to the pagination (nothing if NULL)
        currentCssClass: 'current', // CSS class applied to the current page
        tag: 'ol', // HTML tag for the main pagination container
        subTag: 'li', // HTML tag used to frame the pagination links. The CSS class 'currentCssClass' will be applied.
                      // Can be empty or NULL, in this cases no supplementary tags are used to frame the pagination links.
        position: 'after', // Can be : before
                           // Indicates if the pagination block will be placed before of after the slider.
        container: null // Identifier of the container for the pagination block (nothing by default)
    }
};

var settings = {
    navigation: {
        active: true, // Enable or disable the navigation
        cssClass: 'jbhSliderNavigation', // CSS class added to the navigation
        id: null, // id applied to the navigation (nothing if null)
        loop: true, // Indicates if the previous and next links can be used for loop
        tag: 'ul', // HTML tag of the main container of the navigation
        subTag: 'li', // HTML tag used to frame the navigation links
                      // Can be empty or NULL, in this cases no supplementary tags are used to frame the navigation links.

        // Parameters for the "next" link
        next: {
            text: '>', // HTML text used for the next link
            cssClass: 'jbhSliderNavigationNext' // CSS class
        },

        // Parameters for the "previous" link
        previous: {
            text: '<', // HTML text used for the next link
            cssClass: 'jbhSliderNavigationPrevious' // CSS class
        },

        position: 'after', // Can be : before
                           // Indicates if the navigation block will be placed before or after the slider.
        container: null // Identifier of the container for the navigation block (nothing by default)
    }
};