This component is a container for showing carousel. We add to this carousel the reflection for images. This version of carousel is based on Ext JS 4.0.7. This component is also based on a jquery component : CloudCarousel '1.0.5' <http://www.professorcloud.com>. For further information you would like to check this link : http://www.professorcloud.com/mainsite/carousel.htm
Here is an example for the use:
HTML mark-up :
<div id="carousel-div"/> <!-- Define left and right buttons. --> <input id="left-but" type="button" value="Left"/> <input id="right-but" type="button" value="Right"/><!-- Define elements to accept the alt and title text from the images. --> <p id="title-text"></p> <p id="alt-text"></p>
The style may be like this one :
#carousel-div{ width:560px; height:400px; background:#000; }
Configuration options for the carousel :
Ext.onReady(function() { Ext.createWidget('carousel',{ id: 'carousel-id', xPos: 280, yPos: 80, FPS: 30, reflHeight: 56, reflGap:2, buttonLeft: 'left-but', buttonRight: 'right-but', altBox: 'alt-text', titleBox: 'title-text', autoRotate: 'no', renderTo: 'carousel-div' }); });
You will get a view like this one :
This component is in google code : http://code.google.com/p/ext-js-carousel
For further information about the component check the wiki in the google code : http://code.google.com/p/ext-js-carousel/wiki/Introduction
perfect job Aymen good work ;)
ReplyDeletevery nice work aymen :) impressing !!
ReplyDelete