jCrarousel jQuery

How to Create a Carousel Rotator With jQuery

In this tutorial I will show you, how to create a carrousel with jQuery, that makes your website much more interactive and user friendly. The project needs jQuery library as we as a jQuery plugin called “jQuery roundabout” from Fred LeBlanc.

If you wish the see the demo click here

Before we start developing this cool carousel, you can download the prjoect files here.

We start by creating a simple HTML file which is called index.html. afterward we need to connect our HTML file to jQuery library as  well as “jQuery roundabout” plugin. For the sake of being organised we also create a separate CSS file  as well as a custom JavaScript file and we will connect them to our html file.

Now you should have a HTML file look like below:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carousel</title>

<link href="includes/carousel.css" rel="stylesheet" type="text/css" />
<script src="includes/jquery-1.6.min.js"></script>
<script type="text/javascript" src="includes/jquery.roundabout.min.js"></script>
<script type="text/javascript" src="includes/carousel.js"></script>

</head>

<body>

</body>
</html>

Leave a Reply

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