Advanced Carousel into Wordpress at Ionut Staicu

Advanced Carousel

1 Aug

Ok, as ai said you before, i want to make a tutorial about a more advanced carousel than previous was.

I won’t explain HTML and CSS code (is very simple and intutive):

<div class="carousel">
	<div class="ctrls">
		<a href="#" class="prev">Previous</a>
		<a href="#" class="next">Next</a>
	</div>
<ul class="clearfix">
	<li><img src="http://farm4.static.flickr.com/3164/2719962411_77cf9e1699_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3159/2720786298_d33f97bfcd_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3280/2719962373_f49bb3e2a2_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3001/2720787742_d2f263372c_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3046/2720787680_8f358f938e_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3108/2719963843_f2e963af8f_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3141/2719965289_83902cf96c_t.jpg" alt="" /></li>
 
	<li><img src="http://farm4.static.flickr.com/3164/2719962411_77cf9e1699_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3159/2720786298_d33f97bfcd_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3280/2719962373_f49bb3e2a2_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3001/2720787742_d2f263372c_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3046/2720787680_8f358f938e_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3108/2719963843_f2e963af8f_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3141/2719965289_83902cf96c_t.jpg" alt="" /></li>
</ul>
 
 
</div>

CSS file:

* {margin:0;padding:0;}
 
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
/* Hide from IE Mac \*/
.clearfix {display:block}
/* End hide from IE Mac */
* html .clearfix {height:1px}
.carousel {
	position: relative;
	overflow:hidden;
	height:500px;
	width:540px;
	margin:50px auto
}
	.carousel .ctrls {
		margin:10px
	}
	.carousel ul {
		position: absolute;
		width:8000px;
	}
		.carousel li {
			float:left;
			width:98px;
			height:98px;
			border: 1px solid #fff;
			list-style:none;
			margin-right:10px;
			text-align: center;
		}

The good part of this carousel is that you can have as many as you want in your page. You can have both fixed and fluid width and will work with no problem. Or at least no problem: on fluid layout, some images can be cutted. So, the best use is fixed width. Also, you can have autoscroll (with timers, i will say more later), but is not recommended because you may encounter some performance troubles.

After we include last version of jQuery, we have to do these things:

1) Iterate trough all .carousel containers (if you want to pick another name, this is the place and this is also the time!) and set the width.

$('.carousel').each(function(){
	var _this=this;
	var elWidth = $(_this).find('li:eq(0)').width()+12;
	$(_this).find('ul').width(elWidth*$(_this).find('li').length).css('left', 0);
});

We assume that all LI have same width, 10px margin and a border. So we adjust the width with 12 px (2px from border). If you have a wider margin (or none) change it, otherwise you will have some serious problems

The previous/next buttons we will control with a separate function, because we don’t have double scroll on double click, right? We put the function INSIDE of the each loop:

function carouselCtrls () {
	$(_this).find('a.prev').unbind().click(function(){
		$(this).unbind();
		if(parseInt($(_this).find('ul').css('left'))<0) {
			$(_this).find('ul').animate({
				left: '+='+elWidth
			}, function(){
				carouselCtrls();
			});
		}
		return false;
	});
	$(_this).find('a.next').unbind().click(function(){
		$(this).unbind();
		var maxWidth = (parseInt($(_this).find('ul').width())-$(_this).width()-10)-(-parseInt($(_this).find('ul').css('left')));
		if(maxWidth>0){
 
		$(_this).find('ul').animate({
			left: '-='+elWidth
		}, function(){
				carouselCtrls();
			});
		}else {
			$(_this).find('ul').animate({left:0},function(){
				carouselCtrls();
			});
		}
		return false;
	});
	};

Let see how it works (i will explain only one link because the other one works same – but reverted):

Unbind any action from current link. This is because some users use double click on web (yes, there is some users like that!). So, once clicked, you can’t click again on the same link. Will won’t work. Seriously!
We verify if the carousel is scrolled, and if it is, to be scrolled enough to not be outside the area
Animate the carousel and call the control function after the animation is complete. After the animation is complete, you can click on the next/prev button

So, the final code looks like this:

$('.carousel').each(function(){
	var _this=this;
	var elWidth = $(_this).find('li:eq(0)').width()+12;
	$(_this).find('ul').width(elWidth*$(_this).find('li').length).css('left', 0);
	carouselCtrls();
 
	function carouselCtrls () {
	$(_this).find('a.prev').unbind().click(function(){
		$(this).unbind();
		if(parseInt($(_this).find('ul').css('left'))<0) {
			$(_this).find('ul').animate({
				left: '+='+elWidth
			}, function(){
				carouselCtrls();
			});
		}
		return false;
	});
	$(_this).find('a.next').unbind().click(function(){
		$(this).unbind();
		var maxWidth = (parseInt($(_this).find('ul').width())-$(_this).width()-10)-(-parseInt($(_this).find('ul').css('left')));
		if(maxWidth>0){
 
		$(_this).find('ul').animate({
			left: '-='+elWidth
		}, function(){
				carouselCtrls();
			});
		}else {
			$(_this).find('ul').animate({left:0},function(){
				carouselCtrls();
			});
		}
		return false;
	});
	};
});

And that’s all!
You can see a demo HERE. In few days i will show you how to make a pagination on this carousel and how to make an autoscroll carousel

Stay tuned!

Tags: jquery Comments (5)

Bookmark this article!

Did you like this article?

Don't hesitate to subscribe to my RSS feed!

Also, don't forget, you can also read me on twitter!

5 Comments »

August 5, 2008 Alin said:

Cool! Waiting for the autoscroll
August 11, 2008 Henrich said:

The heart of a script presentation is always the demo. Thank you very much for sharing your tips!
August 17, 2008 Advanced Carousel - Part II | Ionut Staicu - Webdeveloper Blog said:

[...] Carousel – Part II 17 Aug As i said before, i will show you some more nice tricks on that carousel. Today i will show you how can you put a [...]
April 6, 2009 DesiTech said:

Is it possible also to show total record #. (eg: ‘Showing 5 of 20 records’ ) Since you already have auto prev & next taken care. Nice to see this feature. Thanks for your kool tips.
April 6, 2009 Ionut Staicu said:

Hi DesiTech and thanks for your comments.
Since i wrote this article i’ve learned a lot of new (and cool ) stuff. When i will have some free time i will surely write at least one article about carousels, with some new features. And yes, showing “page” number is one of the features. Just stay tuned