Examples

Default

Doesn't do anything without controls, pagination, or autoplay.

glasses
mouse
business
monkey
lion
cows 
	<div id="default">
		<div title="Glasses">
			<img src="/images/demo/131645522.jpg" alt="glasses" width="507" height="338" />
		</div>
		<div title="Mouse">
			<img src="/images/demo/138071106.jpg" alt="mouse" width="507" height="338" />
		</div>
		<div title="Business">
			<img src="/images/demo/143177148.jpg" alt="business" width="507" height="338" />
		</div>
		<div title="Monkey">
			<img src="/images/demo/143921954.jpg" alt="monkey" width="507" height="338" />
		</div>
		<div title="Lion">
			<img src="/images/demo/200355486-002.jpg" alt="lion" width="507" height="338" />
		</div>
		<div title="Cows">
			<img src="/images/demo/96502411.jpg" alt="cows" width="507" height="338" />
		</div>
	</div>
	
$('#default').bbslider();

Autoplay

Slides play automatically.

glasses
mouse
business
monkey
lion
cows 
	<div id="auto">
		<div title="Glasses">
			<img src="/images/demo/131645522.jpg" alt="glasses" width="507" height="338" />
		</div>
		<div title="Mouse">
			<img src="/images/demo/138071106.jpg" alt="mouse" width="507" height="338" />
		</div>
		<div title="Business">
			<img src="/images/demo/143177148.jpg" alt="business" width="507" height="338" />
		</div>
		<div title="Monkey">
			<img src="/images/demo/143921954.jpg" alt="monkey" width="507" height="338" />
		</div>
		<div title="Lion">
			<img src="/images/demo/200355486-002.jpg" alt="lion" width="507" height="338" />
		</div>
		<div title="Cows">
			<img src="/images/demo/96502411.jpg" alt="cows" width="507" height="338" />
		</div>
	</div>
	
$('#auto').bbslider({
	auto: true,
	timer:3000,
	loop:true
});

Pagination

Bare Bones Slider allows the slider to create pagination for you. You can use a function to return the HTML of the pager element.

You can also use the travel method to use your own JavaScript to move between panels.

glasses
mouse
business
monkey
lion
cows 
	<div id="pager">
		<div title="Glasses">
			<img src="/images/demo/131645522.jpg" alt="glasses" width="507" height="338" />
		</div>
		<div title="Mouse">
			<img src="/images/demo/138071106.jpg" alt="mouse" width="507" height="338" />
		</div>
		<div title="Business">
			<img src="/images/demo/143177148.jpg" alt="business" width="507" height="338" />
		</div>
		<div title="Monkey">
			<img src="/images/demo/143921954.jpg" alt="monkey" width="507" height="338" />
		</div>
		<div title="Lion">
			<img src="/images/demo/200355486-002.jpg" alt="lion" width="507" height="338" />
		</div>
		<div title="Cows">
			<img src="/images/demo/96502411.jpg" alt="cows" width="507" height="338" />
		</div>
	</div>
	<div id="pagination-wrapper"></div>
var pageTextDefault = function (pageNum, wrapperID, title) {
  if (!title) {
    title = pageNum;
  }
  return $('
' + title + '
');
};

$('#pager').bbslider({
	pager:	  true,
	pagerWrap:  '#pagination-wrapper',
	pagerText: pagerHTML
});

Controls

Pre-built Controls

Add next and previous controls that appear when hovered on the sides of the slider. The previous control doesn't show on the first panel and next doesn't show on the last panel if loop is false.

glasses
mouse
business
monkey
lion
cows 
	<div id="controls">
		<div title="Glasses">
			<img src="/images/demo/131645522.jpg" alt="glasses" width="507" height="338" />
		</div>
		<div title="Mouse">
			<img src="/images/demo/138071106.jpg" alt="mouse" width="507" height="338" />
		</div>
		<div title="Business">
			<img src="/images/demo/143177148.jpg" alt="business" width="507" height="338" />
		</div>
		<div title="Monkey">
			<img src="/images/demo/143921954.jpg" alt="monkey" width="507" height="338" />
		</div>
		<div title="Lion">
			<img src="/images/demo/200355486-002.jpg" alt="lion" width="507" height="338" />
		</div>
		<div title="Cows">
			<img src="/images/demo/96502411.jpg" alt="cows" width="507" height="338" />
		</div>
	</div>
	
$('#controls').bbslider({
	controls: true,
	loop:     false,
	controlsText:[
		'',
		''],
});

Custom Controls

You can create your own custom next and previous controls using public methods.

glasses
mouse
business
monkey
lion
cows 
	<div id="custom-controls">
		<div title="Glasses">
			<img src="/images/demo/131645522.jpg" alt="glasses" width="507" height="338" />
		</div>
		<div title="Mouse">
			<img src="/images/demo/138071106.jpg" alt="mouse" width="507" height="338" />
		</div>
		<div title="Business">
			<img src="/images/demo/143177148.jpg" alt="business" width="507" height="338" />
		</div>
		<div title="Monkey">
			<img src="/images/demo/143921954.jpg" alt="monkey" width="507" height="338" />
		</div>
		<div title="Lion">
			<img src="/images/demo/200355486-002.jpg" alt="lion" width="507" height="338" />
		</div>
		<div title="Cows">
			<img src="/images/demo/96502411.jpg" alt="cows" width="507" height="338" />
		</div>
	</div>
	
$('#custom-controls').bbslider();
$('#prev').click(function(e) {
	$('#custom-controls').bbslider('prev');
	e.preventDefault();
});
$('#next').click(function(e) {
	$('#custom-controls').bbslider('next');
	e.preventDefault();
});

Transitions

None

glasses
mouse
business
monkey
lion
cows 
	<div id="none">
		<div title="Glasses">
			<img src="/images/demo/131645522.jpg" alt="glasses" width="507" height="338" />
		</div>
		<div title="Mouse">
			<img src="/images/demo/138071106.jpg" alt="mouse" width="507" height="338" />
		</div>
		<div title="Business">
			<img src="/images/demo/143177148.jpg" alt="business" width="507" height="338" />
		</div>
		<div title="Monkey">
			<img src="/images/demo/143921954.jpg" alt="monkey" width="507" height="338" />
		</div>
		<div title="Lion">
			<img src="/images/demo/200355486-002.jpg" alt="lion" width="507" height="338" />
		</div>
		<div title="Cows">
			<img src="/images/demo/96502411.jpg" alt="cows" width="507" height="338" />
		</div>
	</div>
	
$('#none').bbslider({
	controls:   true,
	transition: 'none',
	controlsText:[
		'',
		''],

});

Fade

glasses
mouse
business
monkey
lion
cows 
	<div id="fade">
		<div title="Glasses">
			<img src="/images/demo/131645522.jpg" alt="glasses" width="507" height="338" />
		</div>
		<div title="Mouse">
			<img src="/images/demo/138071106.jpg" alt="mouse" width="507" height="338" />
		</div>
		<div title="Business">
			<img src="/images/demo/143177148.jpg" alt="business" width="507" height="338" />
		</div>
		<div title="Monkey">
			<img src="/images/demo/143921954.jpg" alt="monkey" width="507" height="338" />
		</div>
		<div title="Lion">
			<img src="/images/demo/200355486-002.jpg" alt="lion" width="507" height="338" />
		</div>
		<div title="Cows">
			<img src="/images/demo/96502411.jpg" alt="cows" width="507" height="338" />
		</div>
	</div>
	
$('#fade').bbslider({
	controls:   true,
	transition: 'fade',
	duration:   1000,
	controlsText:[
		'',
		''],

});

Slide

glasses
mouse
business
monkey
lion
cows 
	<div id="slide">
		<div title="Glasses">
			<img src="/images/demo/131645522.jpg" alt="glasses" width="507" height="338" />
		</div>
		<div title="Mouse">
			<img src="/images/demo/138071106.jpg" alt="mouse" width="507" height="338" />
		</div>
		<div title="Business">
			<img src="/images/demo/143177148.jpg" alt="business" width="507" height="338" />
		</div>
		<div title="Monkey">
			<img src="/images/demo/143921954.jpg" alt="monkey" width="507" height="338" />
		</div>
		<div title="Lion">
			<img src="/images/demo/200355486-002.jpg" alt="lion" width="507" height="338" />
		</div>
		<div title="Cows">
			<img src="/images/demo/96502411.jpg" alt="cows" width="507" height="338" />
		</div>
	</div>
	
$('#slide').bbslider({
	controls:   true,
	transition: 'slide',
	duration:   1000,
	controlsText:[
		'',
		''],

});

Slide Vertical

glasses
mouse
business
monkey
lion
cows 
	<div id="slideVert">
		<div title="Glasses">
			<img src="/images/demo/131645522.jpg" alt="glasses" width="507" height="338" />
		</div>
		<div title="Mouse">
			<img src="/images/demo/138071106.jpg" alt="mouse" width="507" height="338" />
		</div>
		<div title="Business">
			<img src="/images/demo/143177148.jpg" alt="business" width="507" height="338" />
		</div>
		<div title="Monkey">
			<img src="/images/demo/143921954.jpg" alt="monkey" width="507" height="338" />
		</div>
		<div title="Lion">
			<img src="/images/demo/200355486-002.jpg" alt="lion" width="507" height="338" />
		</div>
		<div title="Cows">
			<img src="/images/demo/96502411.jpg" alt="cows" width="507" height="338" />
		</div>
	</div>
	
$('#slideVert').bbslider({
	controls:   true,
	transition: 'slideVert',
	duration:   1000,
	controlsText:[
		'',
		''],

});

Blind

glasses
mouse
business
monkey
lion
cows 
	<div id="blind">
		<div title="Glasses">
			<img src="/images/demo/131645522.jpg" alt="glasses" width="507" height="338" />
		</div>
		<div title="Mouse">
			<img src="/images/demo/138071106.jpg" alt="mouse" width="507" height="338" />
		</div>
		<div title="Business">
			<img src="/images/demo/143177148.jpg" alt="business" width="507" height="338" />
		</div>
		<div title="Monkey">
			<img src="/images/demo/143921954.jpg" alt="monkey" width="507" height="338" />
		</div>
		<div title="Lion">
			<img src="/images/demo/200355486-002.jpg" alt="lion" width="507" height="338" />
		</div>
		<div title="Cows">
			<img src="/images/demo/96502411.jpg" alt="cows" width="507" height="338" />
		</div>
	</div>
	
$('#blind').bbslider({
	controls:   true,
	transition: 'blind',
	duration:   1000,
	controlsText:[
		'',
		''],

});

Mask

glasses
mouse
business
monkey
lion
cows 
	<div id="mask">
		<div title="Glasses">
			<img src="/images/demo/131645522.jpg" alt="glasses" width="507" height="338" />
		</div>
		<div title="Mouse">
			<img src="/images/demo/138071106.jpg" alt="mouse" width="507" height="338" />
		</div>
		<div title="Business">
			<img src="/images/demo/143177148.jpg" alt="business" width="507" height="338" />
		</div>
		<div title="Monkey">
			<img src="/images/demo/143921954.jpg" alt="monkey" width="507" height="338" />
		</div>
		<div title="Lion">
			<img src="/images/demo/200355486-002.jpg" alt="lion" width="507" height="338" />
		</div>
		<div title="Cows">
			<img src="/images/demo/96502411.jpg" alt="cows" width="507" height="338" />
		</div>
	</div>
	
$('#mask').bbslider({
	controls:   true,
  transition: 'mask',
  maskImage: '/images/mask.png',
  duration:   1000,
  maskSteps: 23,
	controlsText:[
		'',
		''],

});

Blind and vertical slide transitions are currently not available. Blind transitions with carousel will never be available without DOM manipulation, which this slider doesn't do. Vertical carousels may be added in the future if enough people request it.

	<div id="carousel-none">
		<div title="Glasses">
			<img src="/images/demo/131645522.jpg" alt="glasses" width="507" height="338" />
		</div>
		<div title="Mouse">
			<img src="/images/demo/138071106.jpg" alt="mouse" width="507" height="338" />
		</div>
		<div title="Business">
			<img src="/images/demo/143177148.jpg" alt="business" width="507" height="338" />
		</div>
		<div title="Monkey">
			<img src="/images/demo/143921954.jpg" alt="monkey" width="507" height="338" />
		</div>
		<div title="Lion">
			<img src="/images/demo/200355486-002.jpg" alt="lion" width="507" height="338" />
		</div>
		<div title="Cows">
			<img src="/images/demo/96502411.jpg" alt="cows" width="507" height="338" />
		</div>
	</div>
	
$('#carousel-none').bbslider({
	controls:     true,
	transition:   'none',
	carousel:     3,
	carouselMove: 2,
	controlsText:[
		'',
		''],

});

Cross-fading carousels are not possible with my slider so fade transition requires double the duration time.

	<div id="carousel-fade">
		<div title="Glasses">
			<img src="/images/demo/131645522.jpg" alt="glasses" width="507" height="338" />
		</div>
		<div title="Mouse">
			<img src="/images/demo/138071106.jpg" alt="mouse" width="507" height="338" />
		</div>
		<div title="Business">
			<img src="/images/demo/143177148.jpg" alt="business" width="507" height="338" />
		</div>
		<div title="Monkey">
			<img src="/images/demo/143921954.jpg" alt="monkey" width="507" height="338" />
		</div>
		<div title="Lion">
			<img src="/images/demo/200355486-002.jpg" alt="lion" width="507" height="338" />
		</div>
		<div title="Cows">
			<img src="/images/demo/96502411.jpg" alt="cows" width="507" height="338" />
		</div>
	</div>
	
$('#carousel-fade').bbslider({
	controls:     true,
	transition:   'fade',
	duration:     1000,
	carousel:     3,
	carouselMove: 2,
	controlsText:[
		'',
		''],

});

	<div id="carousel-slide">
		<div title="Glasses">
			<img src="/images/demo/131645522.jpg" alt="glasses" width="507" height="338" />
		</div>
		<div title="Mouse">
			<img src="/images/demo/138071106.jpg" alt="mouse" width="507" height="338" />
		</div>
		<div title="Business">
			<img src="/images/demo/143177148.jpg" alt="business" width="507" height="338" />
		</div>
		<div title="Monkey">
			<img src="/images/demo/143921954.jpg" alt="monkey" width="507" height="338" />
		</div>
		<div title="Lion">
			<img src="/images/demo/200355486-002.jpg" alt="lion" width="507" height="338" />
		</div>
		<div title="Cows">
			<img src="/images/demo/96502411.jpg" alt="cows" width="507" height="338" />
		</div>
	</div>
	
$('#carousel-slide').bbslider({
	controls:     true,
	transition:   'slide',
	duration:     1000,
	carousel:     3,
	carouselMove: 2,
	controlsText:[
		'',
		''],

});

Callback

Function that activates after every slide.

glasses
mouse
business
monkey
lion
cows 
	<div id="callback">
		<div title="Glasses">
			<img src="/images/demo/131645522.jpg" alt="glasses" width="507" height="338" />
		</div>
		<div title="Mouse">
			<img src="/images/demo/138071106.jpg" alt="mouse" width="507" height="338" />
		</div>
		<div title="Business">
			<img src="/images/demo/143177148.jpg" alt="business" width="507" height="338" />
		</div>
		<div title="Monkey">
			<img src="/images/demo/143921954.jpg" alt="monkey" width="507" height="338" />
		</div>
		<div title="Lion">
			<img src="/images/demo/200355486-002.jpg" alt="lion" width="507" height="338" />
		</div>
		<div title="Cows">
			<img src="/images/demo/96502411.jpg" alt="cows" width="507" height="338" />
		</div>
	</div>
	<div id="call-log"></div>
var callBefore = function() {
	var pCount = $('#callback').data('pCount');
	var pIndex = $('#callback').data('pIndex');
	var panel  = pIndex + 1;
	$('#call-log').append('<p>Panel ' + panel + ' of ' + pCount + ' total panels has ended.</p>');
};
var callAfter = function() {
	var pCount = $('#callback').data('pCount');
	var pIndex = $('#callback').data('pIndex');
	var panel  = pIndex + 1;
	$('#call-log').append('<p>Panel ' + panel + ' of ' + pCount + ' total panels has started.</p>');
};

$('#callback').bbslider({
	controls: true,
	callbackBefore: callBefore,
	callbackAfter: callAfter,
	controlsText:[
		'',
		''],

});

Update

Change up the content and then update the slider to reflect those changes.

glasses
mouse
business
monkey
lion
cows

Add Slides | Update Slider

	<div id="update">
		<div title="Glasses">
			<img src="/images/demo/131645522.jpg" alt="glasses" width="507" height="338" />
		</div>
		<div title="Mouse">
			<img src="/images/demo/138071106.jpg" alt="mouse" width="507" height="338" />
		</div>
		<div title="Business">
			<img src="/images/demo/143177148.jpg" alt="business" width="507" height="338" />
		</div>
		<div title="Monkey">
			<img src="/images/demo/143921954.jpg" alt="monkey" width="507" height="338" />
		</div>
		<div title="Lion">
			<img src="/images/demo/200355486-002.jpg" alt="lion" width="507" height="338" />
		</div>
		<div title="Cows">
			<img src="/images/demo/96502411.jpg" alt="cows" width="507" height="338" />
		</div>
	</div>

<p><a href="#" id="add-slides">Add Slides</a> | <a href="#" id="update-slider">Update Slider</a></p>
<p id="update-info"></p>
<div id="update-pager"></div>

$('#update').bbslider({
	pager:	 true,
	pagerWrap: '#update-pager',
	pageInfo:  true,
	infoWrap:  '#update-info'
});
$('#add-slides').click(function(e) {
	var wrapper = $('#update');
	for (var i = 0; i < 10; i++) {
		wrapper.append('<div><img src="http://lorempixel.com/507/338/" alt="placeholder" width="507" height="338" /></div>');
	}
	e.preventDefault();
});
$('#update-slider').click(function(e) {
	$('#update').bbslider('update');
	e.preventDefault();
});

Touch

Allows swiping left or right to move between slides on phones and tablets. Recommended to move controls outside the slider.

glasses
mouse
business
monkey
lion
cows 
	<div id="touch">
		<div title="Glasses">
			<img src="/images/demo/131645522.jpg" alt="glasses" width="507" height="338" />
		</div>
		<div title="Mouse">
			<img src="/images/demo/138071106.jpg" alt="mouse" width="507" height="338" />
		</div>
		<div title="Business">
			<img src="/images/demo/143177148.jpg" alt="business" width="507" height="338" />
		</div>
		<div title="Monkey">
			<img src="/images/demo/143921954.jpg" alt="monkey" width="507" height="338" />
		</div>
		<div title="Lion">
			<img src="/images/demo/200355486-002.jpg" alt="lion" width="507" height="338" />
		</div>
		<div title="Cows">
			<img src="/images/demo/96502411.jpg" alt="cows" width="507" height="338" />
		</div>
	</div>
	
$('#touch').bbslider({
	controls:	false,
	touch:	   true,
	transition:  'slide',
	touchoffset: 50
});