example1

$(function(){
	$('#slider1').bxSlider({
		auto:true,
		speed:1000,
		pause:500
	});
});

<div id="slider1">
	<div><img src="images/new1.jpg"></div>
	<div><img src="images/new2.jpg"></div>
	<div><img src="images/new3.jpg"></div>
</div>

example2

$(function(){
	$('#slider2').bxSlider({
		auto:true,
		speed:1000,
		mode: 'fade',
		captions: true
	});
});

<div id="slider2">
	<div><img src="images/new1.jpg" title="captions"></div>
	<div><img src="images/new2.jpg" title="captions"></div>
	<div><img src="images/new3.jpg" title="captions"></div>
</div>

example3

$(function(){
	$('#slider3').bxSlider({
		auto:true,
		speed:1000,
		mode: 'fade',
		captions: false
	});
});

<div id="slider2">
	<div><img src="images/new1.jpg" title="captions"></div>
	<div><img src="images/new2.jpg" title="captions"></div>
	<div><img src="images/new3.jpg" title="captions"></div>
</div>

example4

$(function(){
	$('#slider4').bxSlider({
		auto:true,
		speed:1000,
		captions: true,
		buildPager: function(slideIndex){
			switch(slideIndex){
				case 0:
				return '<img src="images/new1.jpg">';
				case 1:
				return '<img src="images/new2.jpg">';
				case 2:
				return '<img src="images/new3.jpg">';
			}
		}
	});
});

<style type="text/css">
.bx-custom-pager{bottom: -50px !important;}
.bx-custom-pager .bx-pager-item{width: 33%}
.bx-pager-item .active img{opacity: 0.1}
</style>
<div id="slider4">
	<div><img src="images/new1.jpg" title="captions1"></div>
	<div><img src="images/new2.jpg" title="captions2"></div>
	<div><img src="images/new3.jpg" title="captions3"></div>
</div>

example5

$(function(){
	$('#slider5').bxSlider({
		auto:true,
		speed:1000,
		infiniteLoop: false,
		hideControlOnEnd: true
	});
});

<div id="slider5">
	<div><img src="images/new1.jpg"></div>
	<div><img src="images/new2.jpg"></div>
	<div><img src="images/new3.jpg"></div>
</div>

example6

$(function(){
	$('#slider6').bxSlider({
		auto:true,
		captions: true,
		speed:1000,
		pause:500,
		mode: 'vertical'
	});
});

<div id="slider6">
	<div><img src="images/new1.jpg" title="captions1"></div>
	<div><img src="images/new2.jpg" title="captions2"></div>
	<div><img src="images/new3.jpg" title="captions3"></div>
</div>

example7

$(function(){
	$('#slider1').bxSlider({
		auto:true,
		speed:1000
	});
});

<div id="slider7">
	<div><img src="images/new1.jpg"></div>
	<div><img src="images/new2.jpg"></div>
	<div><img src="images/new3.jpg"></div>
</div>

example8

$(function(){
	$('#slider8').bxSlider({
		auto:true,
		minSlides: 3,
		maxSlides: 3,
		speed: 8000,
		ticker: true
	});
});

<div id="slider8">
	<div><img src="images/new1.jpg"></div>
	<div><img src="images/new2.jpg"></div>
	<div><img src="images/new3.jpg"></div>
</div>

example9 [ 0 ]

$(function(){
	$('#slider9').bxSlider({
		auto:true,
		speed:1000,
		pause:500,
		onSlideAfter:function($slideElement, oldIndex, newIndex){
			var count = Number($('.cont').text());
			$('.cont').text(count + 1);
		}
	});
});

<h1>example9 [ <span class="cont">0</span> ]</h1>
<div id="slider9">
	<div><img src="images/new1.jpg"></div>
	<div><img src="images/new2.jpg"></div>
	<div><img src="images/new3.jpg"></div>
</div>

example10

$(function(){
	$('#slider10').bxSlider({
		auto:true,
		speed:1000,
		minSlides: 2,
		maxSlides: 2,
		slideWidth: 50
	});
});

<div id="slider10">
	<div><img src="images/new1.jpg"></div>
	<div><img src="images/new2.jpg"></div>
	<div><img src="images/new3.jpg"></div>
	<div><img src="images/new1.jpg"></div>
	<div><img src="images/new2.jpg"></div>
	<div><img src="images/new3.jpg"></div>
</div>

example11

1 2 3

$(function(){
	$('#slider11').bxSlider({
		auto:true,
		speed:1000,
		captions: true,
		pagerCustom:'#nvs'
	});
});

<style type="text/css">
#nvs a.active{text-decoration: none;}
</style>
<div id="slider11">
	<div><img src="images/new1.jpg" title="captions1"></div>
	<div><img src="images/new2.jpg" title="captions2"></div>
	<div><img src="images/new3.jpg" title="captions3"></div>
</div>
<div id="nvs">
	<a data-slide-index="0" class="nv">1</a>
	<a data-slide-index="1" class="nv">2</a>
	<a data-slide-index="2" class="nv">3</a>
</div>

example12

1 2 3

$(function(){
	$('#slider12').bxSlider({
		auto:true,
		speed:1000,
		captions: true,
		pagerCustom:'#nvs2',
		nextSelector: '#slider-next',
		prevSelector: '#slider-prev',
		nextText: '>>',
		prevText: '<<'
	});
});

<style type="text/css">
#nvs2 a.active{text-decoration: none;}
</style>
<div id="slider12">
	<div><img src="images/new1.jpg" title="captions1"></div>
	<div><img src="images/new2.jpg" title="captions2"></div>
	<div><img src="images/new3.jpg" title="captions3"></div>
</div>
<div id="nvs2">
	<a data-slide-index="0" class="nv">1</a>
	<a data-slide-index="1" class="nv">2</a>
	<a data-slide-index="2" class="nv">3</a>
</div>
<span id="slider-prev"></span> | <span id="slider-next"></span>