jbSlider

Another jQuery slider plugin... It is simple and easy to use. Feel free to post any comments and suggestions.

View source code

Download Plugin

Some Features

• Optional auto play slideshow
• Optional pause on hover
• Optional next/prev navigation and dot buttons
• Optional loader bar
• Optional thumb views
• Multiple browser support

Settings

	settings = {
		animSpeed	: 1000,
		autoPlay  	: true,
		autoHide	: true,
		autoHideDelay	: 1000,
		autoHideSpeed	: 500,
		controlButtons  : false,
		controlDots	: true,
		controlDotsPos	: "center-top",
		loader 		: false,
		nextText	: "Next",
		pauseTime	: 6000,
		pauseOnHover	: true,
		pauseTextShow	: false,
		pauseText	: "Pause",
		prevText	: "Prev",
		thumbView	: false,
		thumbWidth 	: 90
	};

Usage

To use the jbSlider you have to include the following in your page:

• jQuery
• jbSlider.js
• jbSlider.css

	$(".slider-holder").jbSlider();

You can see some samples below.

Sample

	$("#sample-two").jbSlider({
		pauseOnHover: false,
		controlDots: false
	});

	<div class="slider-holder">
		<img src="image1.jpg">
		<img src="image2.jpg">
		<img src="image3.jpg">
	</div>

Sample with control

	$("#sample-three").jbSlider({
		controlDotsPos: "right-top",
		autoHide	: false
	});

	<div class="slider-holder">
		<img src="image1.jpg">
		<img src="image2.jpg">
		<img src="image3.jpg">
	</div>

Sample with text

	$("#sample-one").jbSlider({
		loader: true,
		pauseTextShow: true,
		thumbView: true,
		controlButtons: true
	});

	<div class="slider-holder">
		<div class="item">
			<a href="#"></a>
			<p>
			<b>Image 1</b><br>
			<em>Lorem ipsum dolor sit amet</em>
			</p>
			<img src="image1.jpg" alt="">
		</div>
		<div class="item">
			<a href="#"></a>
			<p>
			<b>Image 2</b><br>
			<em>Lorem ipsum dolor sit amet</em>
			</p>
			<img src="image2.jpg" alt="">
		</div>
	</div>

comments powered by Disqus