Today I’m gonna share and write about carousel, but not the flash version; this is html5 canvas comboed with jquery version. Check out the beautiful carousel picture below, click to run the demo. It runs smoothly on all major browser and has a cool fallback support in case javascript is turned off. Such a beautiful expression of art written in latest cutting edge tech…all good!
The carousel above is called Cloud Carousel written by Prof Cloud. Below are some example on how to implement this carousel.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <head>
<title>Cloud Carousel</title>
<!-- 1. Download and insert the script from Cloud Carousel Website -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javaScript" src="cloud-carousel.1.0.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// This initialises carousels on the container elements specified, in this case, carousel1.
$("#carousel1").CloudCarousel(
{
// Best is half of the width you set in DIV style of carouselID
xPos: 285,
// Determines the central height of the pivot point of the carousel itself.
yPos: 100,
buttonLeft: $("#butLeft"),
buttonRight: $("#butRight"),
reflHeight: 56,
reflGap:2,
}
);
});
</script>
</head>
<body>
<!-- 2. Declare a div with a given carouselID Name, use style to manage the style and height. You can add background also -->
<!-- 3. Declare class="cloudcarousel" to all the images sandwitched in between the div tag, these will be the images for the carousel -->
<div id="carousel1" style="width:570px; height:220px; background:#000;overflow:scroll;">
<a href="http://www.watchlearnknow.com"><img class="cloudcarousel" src="images/BlueAppIcon.png" alt="AppIcon1" width="58" height ="58"/></a>
<a href="http://www.wikipedia.com"><img class="cloudcarousel" src="images/GoldAppIcon.png" alt="AppIcon2" width="58" height ="58"/></a>
<a href="http://www.wordpress.com"><img class="cloudcarousel" src="images/GreenAppIcon.png" alt="AppIcon3" width="58" height ="58"/></a>
<a href="http://www.yahoo.com"><img class="cloudcarousel" src="images/OrangeAppIcon.png" alt="AppIcon4" width="58" height ="58"/></a>
<a href="http://www.apple.com"><img class="cloudcarousel" src="images/RedAppIcon.png" alt="AppIcon5" width="58" height ="58"/></a>
<a href="http://www.android.com"><img class="cloudcarousel" src="images/PinkAppIcon.png" alt="AppIcon6" width="58" height ="58"/></a>
<div id="butLeft" style="position:relative;top:20px;left:20px;padding:5px;background:#fff;"><</div>
<div id="butRight" style="position:relative;top:20px;left:30px;padding:5px;background:#fff;">></div>
</div>
</body> |
Well that’s it for today. If you want to take a look on my demo in source file.
CarouselHTML5 (4504 downloads)
Nice helpful……