DevExtreme Angular - 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.

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