Thursday, February 14, 2013

A carousel component for Ext JS 4.0.7

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' <>. For further information you would like to check this link :

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 :
Configuration options for the carousel :
 Ext.onReady(function() {
        id: 'carousel-id',
        xPos: 280,
        yPos: 80,
        FPS: 30,
        reflHeight: 56,
        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 :
For further information about the component check the wiki in the google code :