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.
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_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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.