React Gallery - 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_1/PhoneJS/person1.png",
            "https://js.devexpress.com/Content/images/doc/20_1/PhoneJS/person2.png",
            "https://js.devexpress.com/Content/images/doc/20_1/PhoneJS/person3.png",
            "https://js.devexpress.com/Content/images/doc/20_1/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_1/PhoneJS/person1.png",
        "https://js.devexpress.com/Content/images/doc/20_1/PhoneJS/person2.png",
        "https://js.devexpress.com/Content/images/doc/20_1/PhoneJS/person3.png",
        "https://js.devexpress.com/Content/images/doc/20_1/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_1/PhoneJS/person1.png',
                'https://js.devexpress.com/Content/images/doc/20_1/PhoneJS/person2.png',
                'https://js.devexpress.com/Content/images/doc/20_1/PhoneJS/person3.png',
                'https://js.devexpress.com/Content/images/doc/20_1/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_1/PhoneJS/person1.png',
    'https://js.devexpress.com/Content/images/doc/20_1/PhoneJS/person2.png',
    'https://js.devexpress.com/Content/images/doc/20_1/PhoneJS/person3.png',
    'https://js.devexpress.com/Content/images/doc/20_1/PhoneJS/person4.png'
];

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

export default App;
See Also