dojox/mobile/CarouselItem — The Dojo Toolkit

Authors:	Yoshiroh Kamiyama
Developers:	Yoshiroh Kamiyama
since:	V1.8

Introduction ¶

CarouselItem represents an item of dojox/mobile/Carousel. In typical use cases, users do not use this widget alone. Instead, it is used in conjunction with the Carousel widget.

Constructor Parameters ¶

Parameter	Type	Default	Description
alt	String	“”	An alt text for the carousel item image.
src	String	“”	A path for an image to be displayed as a carousel item.
headerText	String	“”	A text that is displayed above the carousel item image.
footerText	String	“”	A text that is displayed below the carousel item image.

Examples ¶

Declarative example¶

<style>
.mblCarouselItem {
    height: 120px;
    margin: 0 10px;
    float: left;
}
</style>

require([
    "dojox/mobile",
    "dojox/mobile/parser",
    "dojox/mobile/CarouselItem"
]);

<!-- Display an image with both header and footer -->
<div data-dojo-type="dojox/mobile/CarouselItem"
     data-dojo-props='src:"images/glass1.jpg", headerText:"My Header", footerText:"My Footer"'></div>

<!-- Display an image with header -->
<div data-dojo-type="dojox/mobile/CarouselItem"
     data-dojo-props='src:"images/glass1.jpg", headerText:"My Header"'></div>

<!-- Display an image footer -->
<div data-dojo-type="dojox/mobile/CarouselItem"
     data-dojo-props='src:"images/glass1.jpg", footerText:"My Footer"'></div>

<!-- Display only an image -->
<div data-dojo-type="dojox/mobile/CarouselItem"
     data-dojo-props='src:"images/glass1.jpg"'></div>

Programmatic example¶

<style>
.mblCarouselItem {
    height: 120px;
    margin: 0 10px;
    float: left;
}
</style>

require([
    "dojo/ready",
    "dojox/mobile/CarouselItem",
    "dojox/mobile",
    "dojox/mobile/parser"
], function(ready, CarouselItem){
    ready(function(){
        // Display an image with both header and footer
        var item1 = new CarouselItem({
            src: "images/glass1.jpg", headerText:"My Header", footerText:"My Footer"
        }, "item1");
        item1.startup();

        // Display an image with header
        var item2 = new CarouselItem({
            src: "images/glass1.jpg", headerText:"My Header"
        }, "item2");
        item2.startup();

        // Display an image with footer
        var item3 = new CarouselItem({
            src: "images/glass1.jpg", footerText:"My Footer"
        }, "item3");
        item3.startup();

        // Display only an image
        var item4 = new CarouselItem({
            src: "images/glass1.jpg"
        }, "item4");
        item4.startup();
    });
});

<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
<div id="item4"></div>

dojox/mobile/CarouselItem ¶

Introduction ¶

Constructor Parameters ¶

Examples ¶

Declarative example¶

Programmatic example¶

Using CarouselItem together with Carousel widget¶

Table of Contents

dojox/mobile/CarouselItem¶

Introduction¶

Constructor Parameters¶

Examples¶

Declarative example¶

Programmatic example¶

Using CarouselItem together with Carousel widget¶

Table of Contents

dojox/mobile/CarouselItem ¶

Introduction ¶

Constructor Parameters ¶

Examples ¶