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 supports two different kinds of pagination, depending on your needs. You can allow the slider to create pagination for you, or you can create your own. For pagination to work, the slider object needs a unique id.

Pre-built Pagination

A few options will allow the slider to create a custom pagination for you. The code is the same for the custom pagination so you can use this to find the right syntax. Adding a title to the panel and turning on pagerTitle will use a title instead of a number.

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>
$('#pager').bbslider({
	pager:	  true,
	pagerWrap:  '#pagination-wrapper',
	pagerTitle: true
});

Custom Pagination

Every pagination link has to have a data-link attribute that corresponds to that id. It also needs a hash in the href attribute with the slide number. On initialization, the slider binds everything with the class "bb-pager-link" to trigger the slider.


<a href="#1" data-link="pager" class="bb-pager-link">Slide 1!</a>

If your link is created after inserting the jquery.bbslider.min.js file, or if you are not using the "bb-pager-link" class, you will have to manually bind it to the slider.


<a href="#2" data-link="pager" id="clicky-link">Slide 2!</a>
$('#clicky-link').bbslider('bindpager');

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

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>
	

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

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

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

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

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

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

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

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

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