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

View Demo

The following code adds the Gallery UI component to your page. The simplest configuration of the UI component 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/22_2/PhoneJS/person1.png",
            "https://js.devexpress.com/Content/images/doc/22_2/PhoneJS/person2.png",
            "https://js.devexpress.com/Content/images/doc/22_2/PhoneJS/person3.png",
            "https://js.devexpress.com/Content/images/doc/22_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/22_2/PhoneJS/person1.png",
        "https://js.devexpress.com/Content/images/doc/22_2/PhoneJS/person2.png",
        "https://js.devexpress.com/Content/images/doc/22_2/PhoneJS/person3.png",
        "https://js.devexpress.com/Content/images/doc/22_2/PhoneJS/person4.png"
    ];
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})

Vue

<template>
    <DxGallery
        :data-source="dataSource"
        :height="300"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxGallery } from 'devextreme-vue/gallery';

export default {
    components: {
        DxGallery
    },
    data() {
        return {
            dataSource: [
                'https://js.devexpress.com/Content/images/doc/22_2/PhoneJS/person1.png',
                'https://js.devexpress.com/Content/images/doc/22_2/PhoneJS/person2.png',
                'https://js.devexpress.com/Content/images/doc/22_2/PhoneJS/person3.png',
                'https://js.devexpress.com/Content/images/doc/22_2/PhoneJS/person4.png'
            ]
        };
    }
}
</script>

React

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Gallery } from 'devextreme-react/gallery';

const dataSource = [
    'https://js.devexpress.com/Content/images/doc/22_2/PhoneJS/person1.png',
    'https://js.devexpress.com/Content/images/doc/22_2/PhoneJS/person2.png',
    'https://js.devexpress.com/Content/images/doc/22_2/PhoneJS/person3.png',
    'https://js.devexpress.com/Content/images/doc/22_2/PhoneJS/person4.png'
];

class App extends React.Component {
    render() {
        return (
            <Gallery
                dataSource={dataSource}
                height={300}
            />
        );
    }
}

export default App;

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

Overview

jQuery

Angular

Vue

React

See Also