bxSlider is a jQuery content slider plugin that is light weight and easy to use.
Features:
- horizontal and vertical slide movement
- auto mode
- start / stop controls
- previous / next controls
- numeric navigation
- continuous ticker mode
All plugins developed by: Steven Wanderski
-
MGMT
Congratulations
Recording the follow-up to your critically-acclaimed debut album has to be a nerve-wracking affair. As a band, do you go with the same sound/formula you used on the first record? On MGMT’s sophomore album Congratulations, they successfully manage to do both.
-
LCD Soundsystem
This is Happening
If This Is Happening does end up being the final LCD Soundsystem release, Murphy certainly picked the right way to end it. “Home” hints at lyrical retrospection while adopting a musical collage that sums up the album, if not LCD’s three full-length releases, fittingly.
-
of Montreal
Skeletal Lamping
Kevin Barnes said about the title: "This record is my attempt to bring all of my puzzling, contradicting, disturbing, humorous...fantasies, ruminations and observations to the surface, so that I can better dissect and understand their reason for being in my head. Hence the title, Skeletal Lamping."
-
Gorillaz
Demon Days
Demon Days is the second studio album by British band Gorillaz, released in May 2005. The album features contributions from De La Soul, Neneh Cherry, Martina Topley-Bird, Roots Manuva, MF DOOM, Ike Turner, Bootie Brown of the Pharcyde, and Dennis Hopper.
$(document).ready(function(){
$('#slides1').bxSlider({
prev_image: 'images/btn_arrow_left.jpg',
next_image: 'images/btn_arrow_right.jpg',
wrapper_class: 'slides1_wrap',
margin: 70,
auto: true,
auto_controls: true
});
});
implementation and configuration
Although the plugin can be applied to any element that contains children, bxSlider works best if applied to a <ul> like so:
<ul> <li>first piece of content</li> <li>second piece of content</li> <li>third piece of content</li> <li>fourth piece of content</li> <li>bxCarousel can accept an unlimited number of elements</li> </ul>
$(document).ready(function(){
$('ul').bxSlider({
alignment: 'horizontal', // 'horizontal', 'vertical' - direction in which slides will move
controls: true, // determines if default 'next'/'prev' controls are displayed
speed: 500, // amount of time slide transition lasts (in milliseconds)
pager: true, // determines if a numeric pager is displayed (1 2 3 4...)
pager_short: false, // determines if a 'short' numeric pager is displayed (1/4)
pager_short_separator: ' / ', // text to be used to separate the short pager
margin: 0, // if 'horizontal', applies a right margin to each slide, if 'vertical' a
// bottom margin is applied. example: margin: 50
next_text: 'next', // text to be displayed for the 'next' control
next_image: '', // image to be used for the 'next' control
prev_text: 'prev', // text to be displayed for the 'prev' control
prev_image: '', // image to be used for the 'prev' control
auto: false, // determines if slides will move automatically
pause: 3500, // time between each slide transition (auto mode only)
auto_direction: 'next', // order in which slides will transition (auto mode only)
auto_hover: true, // determines if slideshow will pause while mouse is hovering over slideshow
auto_controls: false, // determines if 'start'/'stop' controls are displayed (auto mode only)
ticker: false, // determines if slideshow will behave as a constant ticker
ticker_controls: false, // determines if 'start'/'stop' ticker controls are displayed (ticker mode only)
ticker_direction: 'next', // order in which slides will transition (ticker mode only)
ticker_hover: true, // determines if slideshow will pause while mouse is hovering over slideshow
stop_text: 'stop', // text to be displayed for the 'stop' control
start_text: 'start', // text to be displayed for the 'start' control
wrapper_class: 'bxslider_wrap' // class name to be used for the outer wrapper of the slideshow
});
});
notes and tips
- bxSlider works as an infinite loop. example: clicking the 'next' control repeatedly will keep appending the slideshow to itself
- bxSlider v2.0 no longer supports a 'fade' transition. Please use the jQuery Cycle plugin for superior functionality.
- if using auto, never have speed larger than duration
- if you want to apply a margin to each list item, use the plugin parameter 'margin' (see above) instead of using CSS in your stylesheet
change log
- 4/28/10 - version 2.0.1
added pager_short functionality (1/4 instead of 1 2 3 4)