<< back to code examples

Doobie Slider (Fade Effect)

The Doobie slider is a simple slider that cycles through a list of images with arrow controls and pause and resume on rollover. It is easy to add images, just add them to the html and you’re all set.

 

Doobie Slider Code

function doobieSlider(interval, speed) {

	var wrap = $('#wrap');
	var prev = $('.prev');
	var next = $('.next');
	var controls = $('.next, .prev');

	//Slider Auto Play
	var slider = setInterval(function() {

		$('#wrap img:first').appendTo('#wrap').hide().fadeIn(speed);

	},interval);

	// Hide controls
	controls.hide();

	wrap.on('mouseenter', function() {

		clearInterval(slider);
		$('.next, .prev').show();

	});

	wrap.on('mouseleave', function() {

		slider = setInterval(function() {
		$('#wrap img:first').appendTo('#wrap').hide().fadeIn(speed);

		},interval);

		$('.next, .prev').hide();

	});

	//Next button
	next.on('click', function(e) {
		e.preventDefault();
		$('#wrap img:first').appendTo('#wrap').hide().fadeIn(speed);

	});

	//Previous button
	prev.on('click', function(e) {
		e.preventDefault();
		var last = $('#wrap img:last');

		last.fadeOut(speed);

		setTimeout(function(){
		     $('#wrap img:last').prependTo('#wrap').fadeIn();
		}, speed);

	});

}// close doobie slider

Call the Doobie slider function and pass it speed and interval values

      $(document).ready(function() {
	       //call the Doobie Slider
           // Recommended settings are 5000, 500 but you can set them to anything you want.
	       doobieSlider(5000, 500);
      });

Required CSS

/*----Slyder Styles ----*/
#wrap {
	max-width: 960px;
	height: 450px;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	background: #fff;
}

#wrap img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.prev, .next {
	position: absolute;
	top: 50%;
	z-index: 9;
	width: 55px;
	height: 70px;
	margin-top: -35px;
	opacity: .6;
}
.prev {
	left: 15px;
	background: url(img/arrowSprite.png) 0px 0px;
}
.next {
	right: 15px;
	background: url(img/arrowSprite.png) 55px 0px;
}

The markup

<div id="wrap">

	<img src="img/1.jpg" />
	<img src="img/2.jpg" />
	<img src="img/3.jpg" />
	<img src="img/4.jpg" />
	<img src="img/5.jpg" />
	<img src="img/6.jpg" />

	<a href="#"><div class="prev"></div></a>
	<a href="#"><div class="next"></div></a>

</div>

More Code Projects