A newer version of this page is available.

DevExtreme React - Switch Between Images

User Interaction

To switch between images on touch-enabled devices, the user can perform the swipe gesture. A more desktop-oriented solution for the same purpose are the Next and Previous navigation buttons. You can control the swipe gesture and the navigation buttons using the swipeEnabled and showNavButtons options, respectively.

jQuery

JavaScript

$(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"
        ],
        height: 300,
        swipeEnabled: false,
        showNavButtons: true
    });
});

Angular

HTML

TypeScript

<dx-gallery
    [dataSource]="galleryDataSource"
    [height]="300"
    [swipeEnabled]="false"
    [showNavButtons]="true">
</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"
    ];
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})

Vue

<template>
    <DxGallery
        :data-source="dataSource"
        :height="300"
        :swipe-enabled="false"
        :show-nav-buttons="true"
    />
</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'
            ]
        };
    }
}
</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'
];

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

export default App;

With the buttons and swipe gesture, the user switches images in a particular order, and once the last image is reached, the user can only switch back. For this case, you can enable the user to jump straight to the first image, if you set the loop option to true.

jQuery

JavaScript

$(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"
        ],
        height: 300,
        loop: true
    });
});

Angular

HTML

TypeScript

<dx-gallery
    [dataSource]="galleryDataSource"
    [height]="300"
    [loop]="true">
</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"
    ];
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})

Vue

<template>
    <DxGallery
        :data-source="dataSource"
        :height="300"
        :loop="true"
    />
</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'
            ]
        };
    }
}
</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'
];

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

export default App;

Below the current image, the Gallery shows navigation bullets that allow the user to switch images ignoring their order. To disable the navigation bullets, set the indicatorEnabled option to false. If you need to hide them completely, assign false to the showIndicator option.

jQuery

JavaScript

$(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"
        ],
        height: 300,
        indicatorEnabled: false
    });
});

Angular

HTML

TypeScript

<dx-gallery
    [dataSource]="galleryDataSource"
    [height]="300"
    [indicatorEnabled]="false">
</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"
    ];
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})

Vue

<template>
    <DxGallery
        :data-source="dataSource"
        :height="300"
        :indicator-enabled="false"
    />
</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'
            ]
        };
    }
}
</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'
];

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

export default App;

API

NOTE

In this article, the Button widget is used to switch images. This choice is made for purely demonstrational purposes, and you can do the same operations using another widget following the same guidelines.

To switch the Gallery to the next or previous image, call the nextItem(animation) or prevItem(animation) method, respectively.

jQuery

JavaScript

$(function () {
    const gallery = $("#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
    }).dxGallery("instance");

    $("#nextButton").dxButton({
        text: "Next",
        onClick: function () {
            gallery.nextItem(true);
        }
    });

    $("#prevButton").dxButton({
        text: "Previous",
        onClick: function () {
            gallery.prevItem(true);
        }
    });
});

Angular

HTML

TypeScript

<dx-gallery
    [dataSource]="galleryDataSource"
    [height]="300">
</dx-gallery>
<dx-button
    text="Next"
    (onClick)="goToNextItem()">
</dx-button>
<dx-button
    text="Next"
    (onClick)="goToPreviousItem()">
</dx-button>

import { ..., ViewChild } from "@angular/core";
import { DxButtonModule, DxGalleryModule, DxGalleryComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxGalleryComponent, { static: false }) gallery: DxGalleryComponent;
    // Prior to Angular 8
    // @ViewChild(DxGalleryComponent) gallery: DxGalleryComponent;
    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"
    ];
    goToNextItem () {
        this.gallery.instance.nextItem(true);
    }
    goToPreviousItem () {
        this.gallery.instance.prevItem(true);
    }
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule,
        DxButtonModule
    ],
    // ...
})

Vue

<template>
    <div>
        <DxGallery
            :data-source="dataSource"
            :height="300"
            ref="gallery"
        />
        <DxButton
            text="Next"
            @click="goToNextItem"
        />
        <DxButton
            text="Previous"
            @click="goToPreviousItem"
        />
    </div>
</template>

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

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

export default {
    components: {
        DxGallery,
        DxButton
    },
    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'
            ]
        };
    },
    methods: {
        goToNextItem () {
            this.$refs.gallery.instance.nextItem(true);
        }
        goToPreviousItem () {
            this.$refs.gallery.instance.prevItem(true);
        }
    }
}
</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';
import { Button } from 'devextreme-react/button';

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 {
    constructor(props) {
        super(props);

        this.galleryRef = React.createRef();
        this.goToPreviousItem = this.goToPreviousItem.bind(this);
        this.goToNextItem = this.goToNextItem.bind(this);
    }

    goToPreviousItem() {
        this.galleryRef.current.instance.prevItem(true);
    }

    goToNextItem() {
        this.galleryRef.current.instance.nextItem(true);
    }

    render() {
        return (
            <div>
                <Gallery
                    dataSource={dataSource}
                    height={300}
                    ref={this.galleryRef}
                />
                <Button
                    text="Next"
                    onClick={this.goToNextItem}
                />
                <Button
                    text="Previous"
                    onClick={this.goToPreviousItem}
                />
            </div>
        );
    }
}

export default App;

To navigate to a specific image, call the goToItem(itemIndex, animation) method. The first argument should be the index of the required image in the dataSource.

jQuery

JavaScript

const gallery = $("#galleryContainer").dxGallery("instance");
// Goes to the third image
gallery.goToItem(2, true);

Angular

TypeScript

import { DxGalleryModule, DxGalleryComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxGalleryComponent, { static: false }) gallery: DxGalleryComponent;
    // Prior to Angular 8
    // @ViewChild(DxGalleryComponent) gallery: DxGalleryComponent;
    goToItem (index) {
        this.gallery.goToItem(index, true);
    }
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})

Vue

<template>
    <DxGallery
        ref="gallery"
    />
</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
    },
    methods: {
        goToItem (index) {
            this.$refs.gallery.instance.goToItem(index, true);
        }
    }
}
</script>

React

import React from 'react';

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

class App extends React.Component {
    constructor(props) {
        super(props);

        this.galleryRef = React.createRef();
        this.goToItem = this.goToItem.bind(this);
    }

    goToItem(index) {
        this.galleryRef.current.instance.goToItem(index, true);
    }

    render() {
        return (
            <Gallery
                ref={this.galleryRef}
            />
        );
    }
}

export default App;

DevExtreme React - Switch Between Images

User Interaction

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also

API

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also