DevExtreme Vue - 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/18_2/PhoneJS/person1.png",
            "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person2.png",
            "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person3.png",
            "https://js.devexpress.com/Content/images/doc/18_2/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/18_2/PhoneJS/person1.png",
        "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person2.png",
        "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person3.png",
        "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person4.png"
    ];
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})
See Also