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:
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.
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.
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!
