news (8 years ago) | affiliates | f.a.q | contact Upload Register free Custom work (154) forum

HTML5 Canvas Carousel

HTML5 Canvas Carousel - click for preview
open full view in new window
Buy and download License details

User ratings for HTML5 Canvas Carousel.

14 sales, 15421 views
user FWDesign ByFWDesign


This amazing HTML5 Canvas XML Carousel has such a reality 3D presentation for the HTML5 canvas that we believe it is one of the best on sale and there are chances that you may not need another carousel, is a very complex 3D Carousel and has so many cool features (see the demo presentation).
The html5 canvas carousel is optimized for mobile devices (android and ios mobile devices like for example: ipad2, ipad3, samsung galaxy tab ... etc), not only it will run on them but it will act like a native app, you can touch and drag/rotate the carousel just as you would a native app. Please note that we have tested it on ios( ipad2 and ipad3 ) and android (Samsung galaxy tab) the performance is really good especially on the ipad which runs ios5 or higher, the canvas on this devices is hardware accelerated.

This html5 canvas carousel can have any image presented in any way you want: horizontal, vertical, oblique, also it has unique presets with pre-defined movements and presentations. You can also set the colors of the buttons, scrollbar preloaders border etc, basically the entire color and graphics theme can be modified, also all the buttons and scrollbar are optional. Every setting is very easy to modify from the a configuration XML file.
Setting up this carousel is extremly easy one of the reason is because we have chosen the xml format for the configuration file this way is much easier to configure and maintain.

Example for setting up the carousel:

Javascript code: var cc = new CanvasCarousel("myCanvas", "load/config.xml");
HTML code: <canvas id="myCanvas"></canvas>

The CanvasCarousel javacript class function needs just 2 arguments: the canvas id and the path to the xml file, You can declare multiple instances this way, creating a new CanvasCarousel instance for every canvas, with a different id and even different configuration xml file if you need it.

A help file is attached to the download file explaining all configuration tags and installation.

* XML driven
* all the positions, sizes and theme colors can be changed inside the XML file.
* supports any image files (png, jpg, gif).
* set the components canvas width and height.
* set the carousel position on the canvas.
* set the thumb width and height.
* set the carousel radius on x, y and z axis.
* set the carousel angle for horizontal, vertical or oblique presentation.
* set the thumb border size and color.
* tooltip thumb option, which is dynamic (following the mouse).
* set the tooltip background color and the text size and color.
* the buttons can be enabled or disabled (this means that they will not be visible).
* set the buttons colors.
* the scrollbar can be enabled or disabled like the buttons.
* set the scrollbar track and handler colors.
* the buttons, scrollbar and slideshow preloader positions can be set to be anywhere.
* the carousel can also be rotated with the mousewheel (you can disable this if you want).
* slide show option.
* auto play option.
* set the slideshow transition time (when set to autoplay).
* it can open URLs when an image is clicked.
* the performance of this product is so good that you can have multiple carousel instances set to auto-slide in the same page of your project or website

Many other cool features!

Keywords: html5  canvas  carosuel  xml  driven  3d  carousel 


You need to LOGIN to post a comment.
user FWDesign
FWDesign the listing author 8 years ago

I answered this read below!

user kcwang
kcwang purchased this file 8 years ago

Dear Sir,
I have downloaded the the zip file, and try to run the demoCanvasCarousel.html file. However, there is an error message: Error with xml file:error. Could you please tell me why?

Kuang-cheng Wang

user FWDesign
FWDesign the listing author 8 years ago

You can read about this in the help file, but basically when you test the banner local it will not work on all browsers because most of them do not allow ajax, if you want to test it local you have to use firefox or internet explorer9 or higher, of course when the carousel is online it dose not matter which browser you are using it will work on all of them.

user kcwang
kcwang purchased this file 8 years ago

Dear Sir,
I have down the the zip file, and try to execute the demoCanvasCarousel.html. However, there is an error message: Error with xml file:error. Could you please tell me why?
Kuang-cheng Wang

user niallrm92
niallrm92 purchased this file 9 years ago

I am new at this and am wondering if there is a way to make it open on the same window when you click on the images rather than in a new tab/window.

show all 12 comments

Related listings
Advanced 3d carouselAdvanced 3d carousel
3D Carousel menu with XML AS3.03D Carousel menu with ..
HTML5 Canvas Cover FlowHTML5 Canvas Cover Flo..
Flash-XML Banner Rotator - Fly EffectFlash-XML Banner Rotat..
Listing is in collections
This listing is not part of any public collections.