Application mobile : Carrousel de canevas HTML5

0
202
Révolution Lightbox - 1

Voir la démoAcheter $9

Télécharger le script

Carrousel de canevas HTML5 - 2

Carrousel de canevas HTML5 - 3

Mise à jour 21.09.2012 – Nous avons corrigé quelques problèmes de navigation sur mobile, le carrousel est plus réactif.

Il s’agit d’un incroyable carrousel XML HTML5 Canvas présentant une galerie de photos 3D sous la forme d’un carrousel avec des tonnes de fonctionnalités. Vous pouvez personnaliser presque tout et la présentation en réalité 3D est si bonne que vous n’aurez probablement jamais besoin d’un autre carrousel.

Ce carrousel HTML5 Canvas 3D très complexe est optimisé pour les appareils mobiles (appareils mobiles Android et IOS tels que iPad2, iPad3, iPhone, Samsung Galaxy Tab, etc.). Il fonctionne non seulement sur ces appareils, mais il agit comme une application native.Vous pouvez toucher et faire glisser / faire pivoter le carrousel comme vous le feriez pour une application native. Veuillez noter que nous l’avons testé sur IOS (iPad2 et iPad3) et Android (Samsung Galaxy Tab) et que les performances sont vraiment bonnes, surtout sur l’iPad avec IOS5 ou supérieur (le canevas de cet appareil est accéléré par le matériel).

Ce carrousel de toile HTML5 peut avoir n’importe quelle image présentée de la manière que vous voulez: horizontale, verticale, oblique, ainsi que des préréglages uniques avec des mouvements et des présentations prédéfinis. Vous pouvez également définir les couleurs des boutons, la bordure des préchargeurs de barre de défilement, etc., fondamentalement, tout le thème des couleurs et des graphiques peut être modifié. De plus, tous les boutons et la barre de défilement sont facultatifs.

Toutes les options peuvent être facilement modifiées à partir du fichier XML de configuration, donc aussi la maintenance du carrousel est beaucoup plus facile.

Example for setting up the carousel:

Code JavaScript: var cc = new CanvasCarousel («myCanvas», «load / config.xml»); Code HTML:

La fonction de classe JavaScript CanvasCarousel n’a besoin que de 2 arguments: l’identifiant du canevas et le chemin d’accès au fichier XML. De cette façon, vous pouvez déclarer plusieurs instances, en créant une nouvelle instance CanvasCarousel pour chaque canevas, avec un identifiant différent et même une configuration XML différente si vous le souhaitez.

Un fichier d’aide est joint au fichier de téléchargement expliquant toutes les balises de configuration et l’installation. Caractéristiques du carrousel:

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 component's 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 (visible or not).
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 (can be disabled).
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.

Beaucoup d’autres fonctionnalités intéressantes!

Carrousel de canevas HTML5 - 4

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici