Programming

Implementing carouFredSel jQuery plugin, and a use case. 3

Copying from the official site of carouFredSel: “carouFredSel is quite simply the most powerful and flexible way to add carousels to your website”. I’ve been using it for a year now and I have to reason to disagree!

This jQuery plugin is rather heavy but it has helped me build dozens of different carousels and slideshows. Carousels as UI elements are actually considered “bad practice” these days, but good luck telling that to the client, and since I don’t get to actually decide on using carousels or not, this article is about some peculiarities of this plugin and an implementation.

Let’s say that we need a horizontal carousel with photos, that should fill the whole with of the available space, with a single slide in “focus” (but not in the center) and the others should be ”faded out”. Something like this. The typical HTML structure of this elements is this:

<div class="carousel-wrapper">
	<div class="pagination"></div>
	<div class="mask left"></div>
	<div class="mask right"></div>

	<ul class="slides">
		<li class="slide">
			<img src="http://placehold.it/600/b3aa00/ffffff" class="photo" alt="">
		</li>
		<li class="slide">
			<img src="http://placehold.it/600/8bba00/ffffff" class="photo" alt="">
		</li>
		<li class="slide">
			<img src="http://placehold.it/600/a186be/ffffff" class="photo" alt="">
		</li>
		<li class="slide">
			<img src="http://placehold.it/600/cc6600/ffffff" class="photo" alt="">
		</li>
		<li class="slide">
			<img src="http://placehold.it/600/aba000/ffffff" class="photo" alt="">
		</li>
		<li class="slide">
			<img src="http://placehold.it/600/d64646/ffffff" class="photo" alt="">
		</li>
		<li class="slide">
			<img src="http://placehold.it/600/8e468e/ffffff" class="photo" alt="">
		</li>
	</ul>
</div>

Note that the two <div class="mask"> are needed only for this implementation.

Some CSS are needed, and here follow the typical styles (and the mask styles too):

.carousel-wrapper {
	width: 100%;
	height: 600px;
	overflow: hidden;
	position: relative;
}
.carousel-wrapper .slides {
	width: 600px;
	height: 600px;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.carousel-wrapper .slide {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 600px;
	height: 600px;
	overflow: hidden;
}

.carousel-wrapper .mask {
	background: rgba(255, 255, 255, .5);
	display: block;
	z-index: 2;
	position: absolute;
	top: 0;
	bottom: 0;
}
.carousel-wrapper .mask.left {
	margin-right: 480px;
	right: 50%;
	left: 0;
}
.carousel-wrapper .mask.right {
	margin-left: 120px;
	left: 50%;
	right: 0;
}

.pagination {
	margin-right: -120px;
	width: 600px;
	z-index: 1;
	position: absolute;
	right: 50%;
	bottom: 12px;
	text-align: center;
}
.pagination a {
	border: 1px solid #066;
	border-radius: 50%;
	display: inline-block;
	margin: 0 4px;
	outline: none;
	vertical-align: top;
	width: 14px;
	height: 14px;
}
.pagination span {
	display: none;
}
.pagination .selected {
	background: #066;
}

What’s special about this carousel is that the current photo should be on the left side of the 960 pixels wide site, leaving the right side free for other content. This is not responsive and it might be difficult to convert, and let’s not forget that a carousel might be useless to a responsive site anyway. But that is a different article altogether…
The two masks are positioned over the other slides (with position:absolute; z-index:2). The left one has left:0 (the left side of the window), right:50%, to set the distance of the right side of the mask from the right side of the window to be half the total width, and margin-right:480px which is half the width of the site column, at 960 pixels. The right mask respectively has right:0, left:50% and margin-left:120px, which is the (absolute) amount that the current slide overflows half the column — 960 pixels / 2 - 600 pixels (the slide width).

carouFredSel will make sure that the full available width will be filled with slides, with the following settings:

$( '.carousel-wrapper' ).find( '.slides' ).carouFredSel( {
	auto: 5000,
	width: '100%',
	height: 600,
	items: {
		visible: 4,
		width: 600,
		height: 600
	},
	scroll: {
		items: 1,
		easing: 'easeInOutQuint',
		duration: 400,
		pauseOnHover: true
	},
	pagination: '.carousel-wrapper .pagination',
	onCreate: function(){
		$(this).css( 'margin-left', '120px' );
	}
}, { transition: true } );

You should at least run through the official documentation of the plugin because I will only explain the settings that I’ve used above, which are: auto:5000 to make the slideshow “play” automatically (bad idea!), width:'100%' to spread the carousel along the width of the window, height:600 which is the height of the photos (in pixels), items:{visible:4} to fill the screen with slides, up to 4 x 600 = 2400 pixels wide, items:{width:600} for each slides’ width, items:{height:600} for the slides’ height, scroll:{items:1} which is how many items the carousels moves each time, scroll:{easing:'easeInOutQuint'} for the kind of animation[1], scroll:{duration:400} for the animation duration and scroll:{pauseOnHover:true} to pause the animation when the mouse pointer is over the carousel area.

Also, the pagination:'.carousel-wrapper .pagination' instructs carouFredSel to use the div.pagination inside the div.carousel-wrapper to “build” the pagination with the circles (could look like anything, it’s CSS) and the onCreate:function(){ $(this).css( 'margin-left', '120px' ); } makes sure to move ul.slides 120 pixels to the right, which is the amount that the current slide overflows half the column (see the CSS declarations above) after the carousel is built and before the animation begins.

Finally, there is another setting outside the initialization object of carouFredSel, the transition:true which instructs the plugin to use CSS animations, with the help of Transit, a jQuery plugin for CSS transitions and transformations[2].

Notes:

  • The above carousel relies on two default settings of carouFredSel, circular:true and infinite:true.

  • [1] carouFredSel defines only 5 easing functions, “linear”, “swing”, “quadratic”, “cubic” and “elastic“. If you need another, like the “easeInOutQuint” above, you should either load jQuery Easing Plugin or use Transit and the transition:true setting, like the example.

  • [2] If you read the documentation of Transit, you probably saw the method to use jQuery animations in those browsers that do not support CSS Transitions:

    if (!$.support.transition)
      $.fn.transition = $.fn.animate;

    I use Modernizr in all my projects (and so should you!) and so, to finally have animated carousels in every browser that I “support”, I can write the above statement as:

    if ( !Modernizr.testProp( 'transition' ) )
        $.fn.transition = $.fn.animate;

Comments

  1. I will agree that carousels is nowadays a bad practice. In terms of SEO is also a definitely not recommended practice, since the following problems occurs concerning its usage: multiple h1 headings, Flash usage, slow page load speed and shallow content.

    Reply

  2. esteban

    I’m using this for a Client and sending the transition parameter as : { transition : Modernizr.csstransitions }
    allows me to identify css3 transition supported browser from those who not. U save my day!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *