Part 1: How to add Carousel (Slider) to a website using CarouFredSel

In web design industry, carousel refers to a scrolling list of items in either horizontal or vertical order. The scrolling items can be anything like videos, images text etc. where they can be moved back and forth automatically or by user interaction.

An example of typically how a carousel looks like

An example of a full-width carousel

Carousels are everywhere on the web. These are basically created using HTML, CSS and 
Jquery (Javascript library). Thanks to the active Jquery developers, who made our lives easier by creating some easy-to-use carousel plugins. If you search Google for jquery carousel plugins, I'm sure you'll get thousands of plugins and almost all of them have really extensive usage guide.

Among all the carousels I've used, the one I like the most is Caroufredsel. The reason being that not only it's free and has a wide range of configuration options, but on top of that, it's extremely easy to embed in your website. That's why, today, I want to show you how you can use this plugin in your own website. So without further ado, let's see how we can download and use this plugin.

Downloading Caroufredsel plugin

First of all, go to the official website of Caroufredsel which is http://caroufredsel.dev7studios.com/. Immediately you'll notice a big download button on its homepage. This is for downloading all the source files of Caroufredsel with a working example html file. Click on this download button.

Caroufredsel Homepage

After clicking on the download button, you'll be directed to another page where you'll see a link that reads something like click here to download the latest version. Click on this link to start the download (Refer to the screenshot below)

Second download page

Once the download is complete (which won't take more than 2 seconds), open the download location (in my case, it's located on the Desktop), Right-click on the caroufredsel's .ZIP file and select the Extract Here option from the context menu. After the extraction, you'll get the desired carouFredSel's main folder that has all the files we will be needing. You can now get rid of the ZIP folder if you like.

Extract carouFredSel's downloaded file

What's Inside

Let's see what's inside this carouFredsel folder. 

Inside carouFredsel's folder

1. Helper Plugins

Firstly, there's a helper plugin folder which contains some JavaScript files that are not necessary for a simple carousel. They basically add some additional functionality to a carousel like allowing us to scroll through the carousel items via mousewheel, via touch swipe etc. So in simple words, you won't be needing this folder for now. 

2. Index.html

Secondly, there's an HTML file named Index. This is a an example file for carouFredsel. Although you don't need this file for your project but if you just want to have a look at the way this plugin could be applied to your own website, then this sure is helpful. Just take a look at the JavaScript files it has included, the HTML markup it has for the elements and how it has activated the plugin and at the same time attached the markup with it. So you should take some time and have a look at the structure of this file but this file isn't necessary for our own carousel.

3. jQuery CarouFredsel (Uncompressed)

This is the main uncompressed plugin file for carouFredsel. This file is necessary to be included in your project (it is a good practice to include your JavaScript files in your website's JS folder). Since this is an uncompressed version, its file size is 89 KB. An uncompressed version is useful for developers who wants to either learn how a plugin is created or needs a way to modify it. Since we're not interested in the creation of this plugin, we'll only use the compressed/packed version of this plugin (which we'll see next).

4. jQuery CarouFredsel (Compressed)

This is the compressed version of carouFredsel. It is always a good idea to keep the size of your website to a minimum so that browsers can quickly load all the files related to our website. Compressed/Packed versions of a file are made to accomplish the same goal. So for our tutorial, we'll also be using the compressed version of carouFredsel (I recommend you to do the same).

5. jQuery Library

Finally, this folder contains a file for jquery library (version 1.8.2). This is definitely necessary because without it, carouFredsel won't work. You can either use this file in your own project or you could simply go to jQuery's official website and download the latest version of jQuery. Another option for you is to include jQuery's latest library by using a CDN (Content Delivery Network). 

There are plenty of CDNs out there that allow you to host jQuery on their servers but among all of them, Google's CDN is the most popular. (refer to the screenshot below).

Google CDN website to host jQuery

You can use Google's CDN to host jQuery just by adding the first script line under the heading of jQuery. (refer to the screenshot below)

Google CDN link to latest jQuery Library

An advantage to using Google's CDN is that whenever a new version of jQuery is released, Google's CDN automatically points to that latest version. And an added advantage is that since Google hosted jQuery is used widely on other websites as well, therefore, it's highly probable that the visitor coming to our website has a Google hosted jQuery library already cached into his browser which means jQuery will be loaded in a jiffy.

Create a Basic Demo Website

Now that we've downloaded all the necessary files and had a quick look at the files we will be needing, let's get our hands dirty. To demonstrate how to embed this plugin in a website, I'll be creating a demo one-page website and then add this carousel. I could have showed you a way to apply this plugin on a page where there's no other element except for this carousel, but what I've experienced is that usually the real challenge comes when we're required to embed a carousel to a real website with lots of HTML/CSS already in it. The demo website I'm going to make might not look good because I don't want your attention to be diverted from the carousel. So I'll be creating an extremely simple page.

Below is a screenshot of the page I've created where I'll add the carousel.

Initial state of our demo website

At this point, I'm not sure if the HTML/CSS for this demo website (shown above) will be useful for you. But I'm just pasting it so that you could get an idea of how this page is structured.

HTML

<!DOCTYPE html>

<html lang="en">
<head>
   <title>carouFredsel</title>
   <meta charset="utf-8" />
   <link rel="stylesheet" href="css/style.css" />
</head>

<body>

<div class="wrapper">

   <div class="header oh">

      <ul class="navigation">
         <li><a href="#" class="selected">Home</a></li>
         <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul><!-- end .navigation -->

   </div><!-- end .header -->

   <div class="main-area">

   <div class="featured-area-container">
      <div class="featured-area">
         <img src="images/image1.jpg" alt="#" />
            </div><!-- end .featured-area -->
   </div><!-- end .featured-area-container -->

   <div class="content cb">
      <h1>Welcome to Graftalks</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, distinctio ipsum alias veritatis voluptatem laboriosam libero optio soluta facilis voluptatibus odit ab molestiae asperiores dolore aperiam quo earum quasi vitae!</p>

      <p>Quod, doloribus, enim magnam reprehenderit officia quam ex assumenda blanditiis commodi recusandae nisi facere cumque necessitatibus voluptates illo aliquam consequuntur ad architecto!</p>

      <a href="#" class="more-btn">Read More &gt;&gt;</a>
   </div><!-- end .content -->

   <div class="sections oh">

      <h2>Latest Work</h2>

      <div class="area1 col">
         <img src="images/small-image1.jpg" alt="#" />
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, suscipit.</p>
         <a href="#">Read More</a>
      </div><!-- end .area1 -->

      <div class="area2 col">
         <img src="images/small-image2.jpg" alt="#" />
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, suscipit.</p>
 <a href="#">Read More</a>
      </div><!-- end .area1 -->

      <div class="area3 col">
         <img src="images/small-image3.jpg" alt="#" />
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, suscipit.</p>
         <a href="#">Read More</a>
      </div><!-- end .area1 -->

   </div><!-- end .sections -->

   <div class="quote-area">
      <h2>Quote of the Week</h2>
         <blockquote>
            <p>"If Adam's son had a valley full of gold, he would like to have two valleys, for nothing fills his mouth except dust"</p>
         </blockquote>
   </div><!-- end .quote-area -->

   </div><!-- end .main-area -->

   <div class="footer cb">
      <p>Copyright © 2013. Graftalks.blogspot.com. All rights reserved</p>
   </div><!-- end .footer -->
</div><!-- end .wrapper -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</body>
</html>

And here's the CSS. It's not necessary to understand or go through the whole CSS as we're mostly concerned with the HTML markup in order to apply our carousel. But I'm just pasting my styling so that you could directly copy/paste this code and just move on to adding the carousel. One more thing, I haven't checked this CSS on browsers other than Chrome and Firefox because I don't want to focus on cross-browser compatibility issues in this post. Well anyway, here's my CSS.

CSS

/**

=================================================================

RESET

=================================================================

**/

html, body, div, span, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, em, img, strike, strong, 

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, tr, th, td,

article, aside, footer, header, 

nav, section, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, footer, header, nav, section {

display: block;

}

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

/**

=================================================================

GENERAL CLASSES

=================================================================

**/

.cb { clear: both; }

.fl { float: left; }

.fr { float: right; }

.oh { overflow: hidden; }

/**

=================================================================

GENERAL STYLING

=================================================================

**/

body {

background-color: #fff;

font-size: 14px;

font-family: "Droid Sans", Arial, Helvetica, sans-serif;

}

h1, h2, h3, h4, h5, h6 { font-weight: 700; }

h1 { font-size: 25px; }

h2 { font-size: 20px; }

p {

line-height: 1.6em;

margin-bottom: 10px;

}

a { 

color: #e5633a; /* Red */

text-decoration: none; 

}

a:hover { text-decoration: underline; }

/**

=================================================================

WRAPPER

=================================================================

**/

.wrapper {

border-top: 10px solid #555;

margin: 0 auto;

width: 1000px;

}

/**

=================================================================

HEADER

=================================================================

**/

.navigation { margin-bottom: 20px; }

.navigation li {

float: left;

margin-right: 10px;

}

.navigation li a {

color: #555;

display: block;

padding: 10px 15px;

}

.navigation li a.selected {

background-color: #e5633a; /* Red */

color: #fff;

}

/**

=================================================================

CONTENT

=================================================================

**/

.content {

border-bottom: 1px solid #ccc;

padding-bottom: 20px;

}

.content h1 { margin: 20px 0 10px; }

.content p { width: 800px; }

/**

=================================================================

PICTURE SECTIONS

=================================================================

**/

.sections { border-top: 1px solid #fff; }

.sections h2 { margin-bottom: 10px; }

.sections {

margin-bottom: 20px;

padding-top: 20px;

}

.col {

float: left;

margin-right: 5px;

width: 330px;

}

.col:last-child { margin-right: 0; }

.col p { text-align: center; }

.col a {

background-color: #e5633a; /* Red */

color: #fff;

display: block;

padding: 10px 5px;

margin: 0 auto;

width: 70px;

}

.col a:hover {

background-color: #555;

text-decoration: none;

}

/**

=================================================================

BLOCKQUOTE

=================================================================

**/

.quote-area h2 { margin-bottom: 10px; }

blockquote {

background-color: #f5f5f5;

border: 1px solid #ddd;

}

blockquote p {
 color: #999;
 font-family: Georgia, "Times New Roman", serif;
 font-size: 18px;
 font-style: italic;
 margin: 0 auto;
 padding: 30px 20px;
 text-align: center;
 text-shadow: 0 1px 1px #fff;
 width: 500px;
}

/**

=================================================================

FOOTER

=================================================================

**/

.footer {

background-color: #555;

margin-top: 20px;

}

.footer p {

color: #eee;

font-size: 13px;

margin-left: 15px;

padding: 15px 0;

}

Our Website's File Structure

We're now all ready to use our carousel plugin. What I'm going to do is to convert the main banner (picture of the biker) into a carousel. My carousel will contain 3 images but you can have as many as you like.

Before we move on, I want you to see the initial folder structure I have for my website. (see the screenshot below)

Initial Folder Structure of my website

As you can see from the screenshot above, I've my root folder with the name of caroufredsel-website. Inside this root folder, I have 3 folders and 1 separate file. First there's a css folder that contains a style.css file. Next, I have an images folder that contains 4 images for the main banner (1000 px wide x 450 px high) and 3 small images for 3 different sections (images with a prefix of small). After that, there's a js folder which is, for the time being, empty. We'll put our JavaScript files in this folder. Finally, there's an index.html file which is a simple HTML file for our website (as seen above).

Let's Use carouFredsel

We're all set up so let's get started. We'll start off by creating the basic HTML markup for our featured slider. Open up the index.html file (the one we created earlier). At the moment, we have a div with a class of featured-area-container. Inside this div, there's another div with a class of featured-area. And finally inside this div, I've added an image (img tag) that points to the biker picture we've seen in an earlier screenshot. Please see the screenshot below to make things clear.

Existing HTML markup for our carousel

The first step in creating a carousel is to create a list of items (in our case images). So we'll add 3 more images to the .featrured-area div. (refer to the screenshot below)

Adding three more images to the markup

After adding these images, our website will look a little sloppy as the browser will render all these images one on top of another. But don't worry. this is just because we haven't applied our carouFredsel plugin on these images. At the moment, our website looks like the screenshot below.

Our website after adding 3 new images

Not So Fast

We're planning to apply our plugin but don't you think we're forgetting something? Yes of course! we haven't copied the carouFredsel's JavaScript file that came with the download. So we'll open the carouFredsel's folder that we downloaded earlier and copy-paste the packed version of the plugin to our website's js folder (refer to the screenshot below)

Copy/Paste carouFredsel plugin to our js folder

Calling the Plugin

We've now pasted the plugin inside our website's file system. Next we need to tell our index.html file the location of our newly added plugin. To do that open the index.html file and just before the closing </body> tag, write the following line:

<script src="js/jquery.carouFredSel-6.2.1-packed.js"></script>

Note: I usually rename this plugin to a simpler file name, like caroufredsel. I'll do the same thing over here as well.

What About jQuery's Library?

As I've noted before, without jQuery's main library, carouFredsel won't work. So where is it? If you go through the index.html file closely, you'll notice that I've already added the library using Google's CDN (as described earlier).

Adding jQuery using Google's CDN

Note: Make sure that you add carouFredsel's plugin AFTER calling jQuery's library. Otherwise it won't work. This is because the browser reads our code line by line and when it comes to the line where we've defined our plugin BEFORE  jQuery's library, it fails to recognize any of the jQuery we've used.

jQuery Library and plugin calling sequence

If you want to confirm my point, then call the carouFredsel plugin BEFORE jQuery's Library and load your website in Firefox. Immediately, you'll see that your website has reverted back to its old state (i-e: images are stacked on one another) which is an indication that something has gone wrong. To view any possible errors, press F12 to open the Firebug inspector. Click on the Console tab and you'll notice that there's an error that tells you that it can't understand what carouFredsel is. This is because of the same reason I mentioned earlier (file calling sequence).

Firebug's Console shows error

Final Step - A single line of code

We've come a long way now and this is the final step before we'll see our carousel working properly. We've added the appropriate HTML markup, then referenced jQuery and carouFredsel's plugin files in the correct order. The final step is to add some jQuery. 

You can write this code as an inline jQuery (within the script tags inside our index.html file) or as an external jQuery file (in a separate file and then reference it in our HTML file). To tell you the truth, writing inline code has never been a good practice but since we're not really concerned about these issues right now, I'll add the code inline. But I recommend you to add these codes externally to separate HTML markup with JavaScript code.

Just BEFORE the closing body tag and AFTER the line where we have referenced the carouFredsel plugin, open up a new <script></script> tag and in between them, write the following code.

$(function() {

   $(".featured-area").carouFredSel();

});

Save the file, open it up in any browser. And what do you know, IT WORKED!!!

Here's a screenshot of how I've written this code inline in my text editor.

Inline jQuery code to invoke carouFredsel plugin

A Side Note

Sometimes, this carousel works awkwardly. there are some workarounds for them as well which I'll cover in my next post. But for now I just want to point out one thing that sometimes, it's useful to float all the images used in the carouFredsel to left. But anyway, don't bother doing it right now. Just enjoy the way it works at the moment.

Conclusion

Well this tutorial has turned out to be quite huge. But hopefully it'll teach you how you can add this plugin to your website. I plan to post more tutorials on this plugin in the near future where I'll cover adding pagination, custom arrows, vertical carousel, scrolling effects and many more. As for now, I'm done with this part. See ya.