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

jQuery code
				$(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:

html code
				<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>
			
jQuery code
				$(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)

Ads by Yoggrt