Angular Gallery - Overview

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

DevExtreme Accessibility Compliance

DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo's accessibility level, click the Run AXE^® Validation button to launch the AXE^® web accessibility evaluation tool.

All trademarks or registered trademarks are property of their respective owners. AXE^® Terms of Use

The overall accessibility level of your application depends on the Gallery features used.

Backend API

<div class="widget-container"> <dx-gallery #gallery id="gallery" [dataSource]="dataSource" [height]="300" [slideshowDelay]="slideshowDelay" [loop]="true" [showNavButtons]="true" [showIndicator]="true" ></dx-gallery> </div> <div class="options"> <div class="caption">Options</div> <div class="option"> <dx-check-box #loop text="Loop mode" [(value)]="gallery.loop"> </dx-check-box> </div> <div class="option"> <dx-check-box text="Slide show" (onValueChanged)="valueChanged($event)" [value]="true" > </dx-check-box> </div> <div class="option"> <dx-check-box text="Navigation buttons" [(value)]="gallery.showNavButtons"> </dx-check-box> </div> <div class="option"> <dx-check-box text="Indicator" [(value)]="gallery.showIndicator"> </dx-check-box> </div> </div>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxGalleryModule } from 'devextreme-angular'; import { DxCheckBoxModule, DxCheckBoxTypes } from 'devextreme-angular/ui/check-box'; import { Service, Image } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [Service], templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ DxCheckBoxModule, DxGalleryModule, ], }) export class AppComponent { dataSource: Image[]; slideshowDelay = 2000; constructor(service: Service) { this.dataSource = service.getImages(); } valueChanged(e: DxCheckBoxTypes.ValueChangedEvent) { this.slideshowDelay = e.value ? 2000 : 0; } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep .widget-container { margin-right: 240px; } ::ng-deep #gallery { margin: auto; max-width: 450px; } .options { padding: 20px; position: absolute; bottom: 0; right: 0; width: 180px; top: 0; background-color: rgba(191, 191, 191, 0.15); } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; }

import { Injectable } from '@angular/core'; export interface Image { imageAlt: string, imageSrc: string, } const images: Image[] = [ { imageAlt: 'Image 1', imageSrc: '../../../../images/gallery/1.jpg', }, { imageAlt: 'Image 2', imageSrc: '../../../../images/gallery/2.jpg', }, { imageAlt: 'Image 3', imageSrc: '../../../../images/gallery/3.jpg', }, { imageAlt: 'Image 4', imageSrc: '../../../../images/gallery/4.jpg', }, { imageAlt: 'Image 5', imageSrc: '../../../../images/gallery/5.jpg', }, { imageAlt: 'Image 6', imageSrc: '../../../../images/gallery/6.jpg', }, { imageAlt: 'Image 7', imageSrc: '../../../../images/gallery/7.jpg', }, { imageAlt: 'Image 8', imageSrc: '../../../../images/gallery/8.jpg', }, { imageAlt: 'Image 9', imageSrc: '../../../../images/gallery/9.jpg', }, ]; @Injectable() export class Service { getImages() { return images; } }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>