All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Overview

The Gallery is a widget that displays a collection of images in a carousel. The widget is supplied with various navigation controls that allow a user to switch between images.

View Demo

The following code adds the Gallery widget to your page. The simplest configuration of the widget requires only a dataSource and height to be specified.

jQuery
HTML
JavaScript
<div id="galleryContainer"></div>
$(function () {
    $("#galleryContainer").dxGallery({
        dataSource: [
            "https://js.devexpress.com/Content/images/doc/19_1/PhoneJS/person1.png",
            "https://js.devexpress.com/Content/images/doc/19_1/PhoneJS/person2.png",
            "https://js.devexpress.com/Content/images/doc/19_1/PhoneJS/person3.png",
            "https://js.devexpress.com/Content/images/doc/19_1/PhoneJS/person4.png"
        ],
        height: 300
    });
});
Angular
HTML
TypeScript
<dx-gallery
    [dataSource]="galleryDataSource"
    [height]="300">
</dx-gallery>
import { DxGalleryModule } from "devextreme-angular";
// ...
export class AppComponent {
    galleryDataSource = [
        "https://js.devexpress.com/Content/images/doc/19_1/PhoneJS/person1.png",
        "https://js.devexpress.com/Content/images/doc/19_1/PhoneJS/person2.png",
        "https://js.devexpress.com/Content/images/doc/19_1/PhoneJS/person3.png",
        "https://js.devexpress.com/Content/images/doc/19_1/PhoneJS/person4.png"
    ];
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})
See Also