Barousel.js is an intuitive, sleek and simple framework for creating charts. Unlike many other similar frameworks this one is available with a bit more flexible open source license.
The following video clip goes over the Barousel showcase you can find in Barousel official website.
The following video clip goes through the very first steps you need to complete in order to use this library.
The code shown in this video clip is available below. Make sure you fix the relative links to the files that belong to the Barousel.js library.
<!DOCTYPE html>
<html>
<head>
<title>Barousel.js Demo</title>
<link rel="stylesheet" type="text/css" href="barousel.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.barousel.min.js"></script>
</head>
<body>
<div id="mycarousel" class="barousel">
<div class="barousel_image">
<img src="pix1.jpg" alt="" class="default" />
<img src="pix2.jpg" alt="" />
<img src="pix3.jpg" alt="" />
<img src="pix4.jpg" alt="" />
<img src="pix5.jpg" alt="" />
</div>
<div class="barousel_content">
<div class="default">
<p class="header">Bow River</p>
<p style="font-size:14pt">The Lovely River in Banff</p>
<p><a href="http://www.google.com">more</a></p>
</div>
<div>
Banff
</div>
<div>
Spitz
</div>
<div>
Interlaken
</div>
<div>
Central Park
</div>
</div>
<div class="barousel_nav">
</div>
</div>
<script type="text/javascript">
$('#mycarousel').barousel({
manualCarousel: 1
});
</script>
</body>
</html>
You can find the complete sample with all the other files it uses as well as slides and video clips for learning how to use the Barousel.js library in my new Barousel.js Basics free course at http://abelski.lifemichael.com.
