WaterWheel jQuery carousel

  • WaterWheel jQuery carousel, 5.0 out of 5 based on 1 rating


    waterwheel jquery carouselThis jQuery plugin can display images with a cascading waterfall effect. It can be positioned either horizontally or vertically, and custom events can fired when an image rotates into the center or is clicked. The appearance of the carousel is very customizable.

    How to use this plugin

    Download the plugin ZIP package from the link below. For this plugin to work, you will need to include the latest version of jQuery on your webpage BEFORE including this script. This plugin currently works with jQuery verson 1.4, and will most likely work with any further releases. It was originally developed using version 1.3, but will no longer work with that version.

    Head Code

    <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.waterwheelCarousel.js"></script>

    a smidgen of CSS

    #waterwheelCarousel {
	height:230px;
}
#waterwheelCarousel > img {
	display:none;
}

    The basic Carousel

    <div id="waterwheelCarousel">
	<img src="image1.jpg" alt="Test Image 1">
	<img src="image1.jpg" alt="Test Image 2">
	<img src="image1.jpg" alt="Test Image 3">
	<img src="image1.jpg" alt="Test Image 4">
	<img src="image1.jpg" alt="Test Image 5">
</div>

    Finally: some control script

    <script type="text/javascript">
    $("#waterwheelCarousel").waterwheelCarousel("horizontal",{
    // include options like this:
    // (use quotes only for string values, and no trailing comma after last option)
    // option: value,
    // option: value
    });
</script>

    Enjoyed this post? Subscribe to our RSS feeds!

    Troubleshooting

    This plug-in has been in on and off development for several months and has seen numerous revisions. If you have any problems using it or find any bugs, PLEASE USE THE CONTACT LINK ABOVE to send me an email so I can fix it!

    The carousel isn’t showing up

    There are a few reasons this could happen.
    (1) – Check to make sure the structure (HTML code) for each feature is the same as the example above.
    (2) – Be sure the options you passed in make sense. You shouldn’t make the starting feature -4 for instance.
    (3) – Make sure you included the plugin javascript file AFTER the jQuery javascript file in your webpage’s header?
    If you still have problems, contact me and I will respond ASAP.

    The animations look strange

    If the animations look strange, check the following:
    (1) – Are all your images the same size? If you aren’t specifying an exact height and width for the features, make sure all the images are the same dimensions. The carousel doesn’t support images of different sizes.
    (2) – Make sure the easing method you passed in as a parameter is valid AND you included the javascript plugin for easing ABOVE the JS file for the carousel and BELOW the JS file for jQuery.
    (3) – Internet Explorer does not render animations as quickly as Firefox, Safari, and Chrome do. Because of this, if the carousel is rotating very quickly, it may look like its not animating at all! To fix this, set quickerForFurther to false in the options.





          


    Author: Brian K Osbourne
    Download: From Here
    Info: From Here
    Icons : FastICONS

    Subscribe to Site Help Web Resources Feed

    Make a donation

    Related Posts:

    GD Star Rating
    loading…

    August 13th, 2010 | Blue | 4 Comments | Tags: ,

About The Author

Steve

Hi I am a webdeveloper based in Brisbane, Australia. Fanatical about the internet and website code and development. Hence this site, a showcase resource site for you to get the latest greatest code , scripts , apps and demos all from the one venue.

4 Responses and Counting...

Leave a Reply

* Name, Email, and Comment are Required