JbhSlider, the simple way to slide

Default slider

This slider is the default configuration.

HTML

<div id="default_slider">
  <ul>
    <li><img src="http://dummyimage.com/500x250" /></li>
    <li><img src="http://dummyimage.com/500x250" /></li>
    <li><img src="http://dummyimage.com/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://dummyimage.com/500x250" /></li>
    <li><img src="http://dummyimage.com/500x250" /></li>
    <li><img src="http://dummyimage.com/500x250" /></li>
  </ul>
</div>

Javascript

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

Customizable? Yes, it is.

This slider is fun. Use the settings.

1. Timer to 5 seconds
2. div tags only, with 2 levels (not 3 by default)
3. Transition customized
4. Slide duration to 0 second (but x_duration to 1 second ;) )
5. No pagination & navigation
6. More CSS applied to the slider and the items (for the border)

HTML

<div id="custom_slider">
  <div><img src="http://dummyimage.com/500x250" /></div>
  <div><img src="http://dummyimage.com/500x250" /></div>
  <div><img src="http://dummyimage.com/500x250" /></div>
</div>

Javascript

jQuery('#custom_slider').jbhSlider({
    selector: null,
    css: {
        width: 510,
        height: 260
    },
    elements: {
        selector: '> div',
        css: {
            borderTop: '5px solid orange',
            borderLeft: '5px solid yellow',
            borderBottom: '5px solid violet',
            borderRight: '5px solid green',
            width: 500,
            height: 250
        }
    },
    transition: {
        duration: 0,
        x_duration: 1000,
        timer: 4000,
        
        before: function (slider, to, transition) {
            // stop events
            to.stop(true);
            slider.data('current').stop(true);
            // css for next item
            to.find('img').css({
                width: 500,
                height: 250
            });
            to.css({
                top: 0,
                left: 0,
                width: 500,
                height: 250
            });
            // transition
            to.animate({
                opacity: 1
            }, slider.data('settings').transition.x_duration);
            slider.data('current').find('img').animate({
                width: 0,
                height: 0
            }, slider.data('settings').transition.x_duration);
            slider.data('current').animate({
                opacity: 0,
                top: 125,
                left: 250,
                width: 0,
                height: 0
            }, slider.data('settings').transition.x_duration, function () {
                transition();
            });
        }
        
    },
    pagination: {
        type: false
    },
    navigation: {
        active: false
    }
});

WTF?

It's easy to change the transition.

Three things

1. set transition.duration to 0
2. set transition.effect to fade (by default)
3. change the transition.before closure

Take a look of the transition.before setting on the left side ;)
The x_duration is a custom setting.

Why?

Simply because if the duration is set to 0, the fade will be instant. And an instant fade is equal to just change the slide/element displayed.
Before run the transition you can change the css rules for the current and the next slides/elements. With the animate method or not!
Easy.

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://dummyimage.com/500x250" /></li>
    <li><img src="http://dummyimage.com/500x250" /></li>
    <li><img src="http://dummyimage.com/500x250" /></li>
  </ul>
</div>
<ul id="control_navigation">
    <li><a href="#" rel="1"><img src="http://dummyimage.com/30x20" /></a></li>
    <li><a href="#" rel="2"><img src="http://dummyimage.com/30x20" /></a></li>
    <li><a href="#" rel="3"><img src="http://dummyimage.com/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: null
    },
    css: {
        width: 500,
        height: 250
    },
    transition: {
        type: 'fade',
        duration: 1000,
        timer: 3000,
        actionStopTimer: true,
        mouseHoverStop: 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 = {
    selector: '> ul', // CSS Selector for the slides/elements container
                      // If null: the slider is the container but the transition effect is set to fade.
                      // By default the slider is like that: div > ul.jbhSlider > collection(li.jbhSliderItem)
    cssClass: 'jbhSlider' // The CSS class for the slider
};

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 which will be applied to the slides/elements and the slider.
    },
    elements: {
        css: {} // List of css properties which will be applied to the elements.
                // If empty, the css setting (above) will be used.
    }
};

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
        mouseHoverStop: true, // Indicates if the transition will stop or not when the mouse hovers on the slider
        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)
    }
};

How to select slider elements

/**
 * The slider
 */
var slider = $('slider_id');

// The settings
slider.data('settings');

// Elements count
slider.data('count');

// The current slide/element
slider.data('current');

// Previous and next slide/element
slider.data('previous'); // element or null
slider.data('next'); // element or null

// Mouse over the slider?
slider.data('mouseIn'); // bool

/**
 * Some access via the settings
 */
var settings = slider.data('settings');

// All elements
settings.data.liList; // bad name... I know :D

// The current zIndex for the fade effect
settings.data.zIndex;

/**
 * With the current slide... lot of data
 */
var element = slider.data('current');

// Position of the slide
element.data('position');

// Is first? Last?
element.data('first'); // bool
element.data('last'); // bool

// The pager link for this element
element.data('pager');

// The slider of course :)
element.data('slider');

/**
 * With the pager link
 */
var pagerLink = element.data('pager');

// The linked element
pagerLink.data('to'); // element

// The slider of course :)
pagerLink.data('slider');

/**
 * The pagination
 */
var pagination = slider.data('settings').pagination.element;

// The pagination elements
slider.data('settings').pagination.elements;

/**
 * The navigation
 */
var navigation = slider.data('settings').navigation.element;

// The previous link
slider.data('settings').navigation.previous.link;

// The next link
slider.data('settings').navigation.next.link;

// For previous and next links, you can get the slider of course ;)
slider.data('settings').navigation.previous.link.data('slider');
slider.data('settings').navigation.next.link.data('slider');