Make A Beautiful Carousel with carouFredSel and UI Kit from Design Deck

Posted by & filed under Tech, Web Development. 34,811 views

There are plenty of javascript plugin out there, and in the same time, there are hundreds of free psd ui layouts available for everyone to use. We have seen a lot of blogs talk about list of beautiful UI, but, how do we use it? Yes, we are here to answer the question. In favbulous, we show you how to use them.

This time, we will show you how to skin a carousel. Carousel is a very common image gallery animation on web and usually in portfolio or photography websites. Before we start, we need to pick a carousel that fits into this beautiful carousel/slideshow psd template from DesignDeck:

carousel design from designdeck

According to the design, we need to find a javascript plugin that supports the following features:

  • jQuery framework (we like jQuery)
  • Support Previous and Next Arrows
  • Support Number navigation or pagination
  • Display multiple items in the same time
  • IE, FF, Safari and Chrome Support

The Right Carousel Plugin

After a few searches on Google, we found this – caroudFredSel. A powerful and highly configurable carousel that uses jQuery framework. We are totally amazed by carouFredSel, this is what a carousel should have been. Well done fred! It even has a step-by-step guidance on the website to help non-jquery programmer to configure the carousel called carouFredSel configuration robot

This is the layout we want, it’s in the demo. We added auto scroll, scroll duration and pause on hover attributes.

$('#carousel ul').carouFredSel({
	prev: '#prev',
	next: '#next',
	pagination: "#pager",
	auto: true,
	scroll: 1000,
	pauseOnHover: true
});

The Blue Print

The following diagram depicts how we transform each component of carousel to the design. We won’t alter the HTML structure, it would defeat the purpose of skinning.

carousel - blueprint

The HTML Structure

We reuse the HTML structure supplied in carouFredSel’s default layout except inside each li, we added an img and an a. Please make sure there are two separated elements, because the a tag will be position on top of the image to create a glare on top of each image.

<div id="carousel">
	<ul>
		<li><img src="images/image1.jpg" alt="" /><a href="">Image1</a></li>
		<li><img src="images/image2.jpg" alt="" /><a href="">Image2</a></li>
		<li><img src="images/image3.jpg" alt="" /><a href="">Image3</a></li>
		<li><img src="images/image1.jpg" alt="" /><a href="">Image1</a></li>
		<li><img src="images/image2.jpg" alt="" /><a href="">Image2</a></li>
		<li><img src="images/image3.jpg" alt="" /><a href="">Image3</a></li>					
	</ul>
	<div class="clearfix"></div>
	<!-- prev and next button -->
	<a id="prev" class="prev" href="#"><</a>
	<a id="next" class="next" href="#">></a>
	<!-- pagination -->
	<div id="pager" class="pager"></div>
</div>

Skin it up!

Alright, it’s time to skin it up according to our plan. We sliced the psd into 3 main images:

  • carousel_control: Image sprite for all the navigation controls (preview, next and bullet point navigation image).
  • carousel_polaroid: This is the polaroid frame for each image.
  • carousel_shine:: This is the glare on top of each image.
css sprite for carousel

Lastly, this is the CSS code:

#carousel {
	margin: 0 0 30px 0;
	width: 735px;
	position:relative;
}
#carousel ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}
/* Polaroid background image put here */
/* Need to set the width and height of the polaroid frame */
#carousel li {
	font-size: 40px;
	color: #999;
	text-align: center;
	width: 232px;
	height: 178px;
	padding: 0;
	margin: 6px;
	display: block;
	float: left;
	background: transparent url('images/carousel_polaroid.png') no-repeat 0 0;
	position:relative;
}

/* Position the image to fit into the polaroid frame */
/* We use margin-top to bump it down */
#carousel li img {
	width:201px;
	height:127px;
	margin-top:14px;
}

/* We put the glare background in here */
/* We make it a block element and absolute position */
/* z-index to make sure it appear on top of the image */
#carousel li a {
	width:201px;
	height:127px;
	position:absolute;
	display:block;
	z-index:2;
	top:14px;
	left:16px;
	background: transparent url('images/carousel_shine.png') no-repeat 0 0;
	text-indent:-999em;
}			

.clearfix {
	float: none;
	clear: both;
}
/* Skin the button with carousel control sprite*/
/* Make it position absolute to move it easily */
#carousel .prev, #carousel .next {
	margin-left: 10px;
	width:15px;
	height:21px;			
	display:block;				
	text-indent:-999em;
	background: transparent url('images/carousel_control.png') no-repeat 0 0;
	position:absolute;
	top:70px;				
}
/* Individual setting for previous button */
#carousel .prev {
	background-position:0 0;
	left:-30px;
}
	#carousel .prev:hover {
		left:-31px;
	}			
/* Individual setting for next button */
#carousel .next {
	background-position: -18px 0;
	right:-20px;
}
	#carousel .next:hover {
		right:-21px;
	}				
#carousel .pager {
	margin:0 auto;
	text-align: center;
}
/* Style the pagination button with dot */
/* Same as prev and next button, we use the same css sprite */
#carousel .pager a {
	margin: 0 5px 0 0;
	text-decoration: none;
	display:inline-block;
	width:8px;
	height:8px;
	background: transparent url('images/carousel_control.png') no-repeat -2px -32px;
	text-indent:-999em;
}
#carousel .pager a.selected {
	text-decoration: underline;
	background: transparent url('images/carousel_control.png') no-repeat -12px -32px;				
}

Finally…

You should get a working carousel that look exactly the same, pixel perfect as the design. I hope you get something out of this tutorial. There are plenty of free psd layouts online, take full advantage of them and boost your productivity!

carousel - final result

SHARE IT

RELATED POSTS

20 Funny Lorem Ipsum Dummy Text Generators
23 Stunning Parallax Scroll Websites You Have to Know
5 Reasons To Choose Linux Virtual Server Hosting

COMMENTS

  • Tarık Sarı

    ohh gods man thenks

  • HafsiKamal

    Hello,
    How can I set 4 thumbnails, and control the width of the carousel?
    Thanks

  • ARK Prepper

    I need to have a previous and next image after the active image, have previous and next arrows with transparent backgrounds over the previous and next images on either side of the active image and those previous and next images are not full images, just a preview or a truncated version…..

    any direction?