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.

View Demo

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.

jQuery

HTML

JavaScript

<div id="galleryContainer"></div>

$(function () {
    $("#galleryContainer").dxGallery({
        dataSource: [
            "https://js.devexpress.com/Content/images/doc/19_2/PhoneJS/person1.png",
            "https://js.devexpress.com/Content/images/doc/19_2/PhoneJS/person2.png",
            "https://js.devexpress.com/Content/images/doc/19_2/PhoneJS/person3.png",
            "https://js.devexpress.com/Content/images/doc/19_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/19_2/PhoneJS/person1.png",
        "https://js.devexpress.com/Content/images/doc/19_2/PhoneJS/person2.png",
        "https://js.devexpress.com/Content/images/doc/19_2/PhoneJS/person3.png",
        "https://js.devexpress.com/Content/images/doc/19_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/19_2/PhoneJS/person1.png',
                'https://js.devexpress.com/Content/images/doc/19_2/PhoneJS/person2.png',
                'https://js.devexpress.com/Content/images/doc/19_2/PhoneJS/person3.png',
                'https://js.devexpress.com/Content/images/doc/19_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/19_2/PhoneJS/person1.png',
    'https://js.devexpress.com/Content/images/doc/19_2/PhoneJS/person2.png',
    'https://js.devexpress.com/Content/images/doc/19_2/PhoneJS/person3.png',
    'https://js.devexpress.com/Content/images/doc/19_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

DevExtreme jQuery - Overview

jQuery

Angular

Vue

React

See Also