jquery幻灯片定制插件

Examples

Default slider

这个滑块是默认配置。

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.

Timer to 5 seconds
Slide duration to 0.5 second
Horizontal slide
Simple pagination
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.

Timer to 5 seconds
div tags only, with 2 levels (not 3 by default)
Transition customized
Slide duration to 0 second (but x_duration to 1 second ;) )
No pagination & navigation
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

set transition.duration to 0
set transition.effect to fade (by default)
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.

No timer
Slide duration to 2 seconds
Horizontal slide
No navigation
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.

Documentation

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

Basics

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
};

Triggers

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
}
};

The slides

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
}
};

Cascading Style Sheets

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.
}
};

Transition

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)
}
};

Pagination

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)
}
};

Navigation

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');