<< back to code examples

Doobie Slider (Slide Effect)

It’s the Doobie slider that actually slides. Download the “slide-effect” branch on Github for the new version of the Doobie Slider. Add as many slides as you like and they will endlessly loop.

function doobieSlider(interval, speed) {

	var wrap = $('#wrap'),
	prev = $('.prev'),
	next = $('.next'),
	controls = $('.next, .prev'),
	first = $('#long-wrap a:eq(0)');

	function slide() {
		var first = $('#long-wrap a:eq(0)'),
		second = $('#long-wrap a:eq(1)');

		second.css('right', '0').animate({

			right: '+960px'

		}, speed);

		first.animate({

			right: '+=960px'

		}, speed, function(){ 

			first.removeAttr('style').appendTo('#long-wrap');

			    $('#long-wrap a:eq(0)').css('right', '960px');

			});
	}

	function nextSlide(e){
		e.preventDefault();

		slide();

		setTimeout(function(){
			$('.next').one('click', nextSlide);
		}, speed);
	}

	function prevSlide(e){
		e.preventDefault();

		var first = $('#long-wrap a:eq(0)');
		var last = $('#long-wrap a:last');

		last.css('left', '0').animate({

			left: '+960px'

		}, speed);

		first.animate({

			right: '-=960px'

		}, speed, function(){

			last.removeAttr('style').prependTo('#long-wrap');
			$('#long-wrap a:eq(0)').css('right', '960px');
			$('#long-wrap a:eq(0)').next().removeAttr('style');
			$('.prev').one('click', prevSlide);

		});

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

		slide();

	},interval);

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

			clearInterval(slider);

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

	});

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

		slider = setInterval(function() {

			slide();

		},interval);

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

	});

	// Hide controls
	controls.hide();

	//initial placement of first slide
	first.css('right', '960px');

	//Next button
	next.one('click', nextSlide);

	//Previous button
	prev.one('click', prevSlide);

}// close doobie slider

 

$(document).ready(function() {
	//call the Doobie Slider
        doobieSlider(5000, 500);
	// Reccommended settings are 5000, 500.
	// 1st number is the time between slide transitions.
	// 2nd number is the speed of the slide.

});

css

#wrap, #long-wrap {
		position: relative;
	}
	#long-wrap a, .prev, .next {
		position: absolute;
	}
	#wrap {
		max-width: 960px;
		height: 450px;
		overflow: hidden;
		margin: 0 auto;
		background: #fff;
	}
	#long-wrap {
		width: 2880px;
		margin-left: -960px;
	}
	#long-wrap a {
		top: 0;
	}
	.prev, .next {
		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;
	}

html

        <div id="wrap">

		<div id="long-wrap">

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

		</div>

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

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

	</div>

More Code Projects