All docs
V20.2
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

Overview

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/20_2/PhoneJS/person1.png",
            "https://js.devexpress.com/Content/images/doc/20_2/PhoneJS/person2.png",
            "https://js.devexpress.com/Content/images/doc/20_2/PhoneJS/person3.png",
            "https://js.devexpress.com/Content/images/doc/20_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/20_2/PhoneJS/person1.png",
        "https://js.devexpress.com/Content/images/doc/20_2/PhoneJS/person2.png",
        "https://js.devexpress.com/Content/images/doc/20_2/PhoneJS/person3.png",
        "https://js.devexpress.com/Content/images/doc/20_2/PhoneJS/person4.png"
    ];
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})
Vue
<template>
    <DxGallery
        :data-source="dataSource"
        :height="300"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
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/20_2/PhoneJS/person1.png',
                'https://js.devexpress.com/Content/images/doc/20_2/PhoneJS/person2.png',
                'https://js.devexpress.com/Content/images/doc/20_2/PhoneJS/person3.png',
                'https://js.devexpress.com/Content/images/doc/20_2/PhoneJS/person4.png'
            ]
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

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

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

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

export default App;
See Also