bxCarousel is an advanced, yet easy to use jQuery carousel plugin.

Features:

  • specify number of elements to display
  • specify number of elements to move the slide
  • auto mode
  • previous / next controls

All plugins developed by: Steven Wanderski

example one: display 4 elements, move 2 at a time

  • Pic One
  • Pic Two
  • Pic Three
  • Pic Four
  • Pic Five
  • Pic Six
  • Pic Seven
jQuery code 
					$(document).ready(function(){
						$('#example1').bxCarousel({
							display_num: 4,
							move: 2,
							prev_image: 'images/icon_arrow_left.png',
							next_image: 'images/icon_arrow_right.png',
							margin: 10
						});
					});

example two: display 3 elements, move 1 at a time, auto play, no controls

  • Pic One
  • Pic Two
  • Pic Three
  • Pic Four
  • Pic Five
  • Pic Six
  • Pic Seven
jQuery code 
					$(document).ready(function(){
						$('#example2').bxCarousel({
							display_num: 3,
							move: 1,
							auto: true,
							controls: false,
							margin: 10,
							auto_hover: true
						});
					});

implementation and configuration

bxCarousel must be applied to an html unordered list 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').bxCarousel({
						display_num: 4,       // number of elements to be visible
						move: 4,              // number of elements to the shift the slides
						speed: 500,           // number in milliseconds it takes to finish slide animation
						margin:0,             // right margin to be applied to each <li> element (in pixels, although do not include "px")
						auto: false,          // automatically play slides without a user click
						auto_interval: 2000,  // the amount of time in milliseconds between each auto animation
						auto_dir: 'next',     // direction of auto slideshow (options: 'next', 'prev')
						auto_hover: false,    // determines if the slideshow will stop when user hovers over slideshow
						next_text: 'next',    // text to be used for the 'next' control
						next_image: '',       // image to be used for the 'next' control
						prev_text: 'prev',    // text to be used for the 'prev' control
						prev_image: '',       // image to be used for the 'prev' control
						controls: true        // determines if controls will be displayed
					});
				});

notes and tips

  • bxCarousel works as an infinite loop. example: clicking the 'next' control repeatedly will keep appending the <ul> to itself
  • bxCarousel will work with any html elements, not just images
  • if using auto, never have speed larger than duration