Vue Gallery - 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 properties, respectively.

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

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

export default {
    components: {
        DxGallery
    },
    data() {
        return {
            dataSource: [
                'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png',
                'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.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/25_2/PhoneJS/person1.png',
    'https://js.devexpress.com/Content/images/doc/25_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 property to true.

jQuery
JavaScript
$(function () {
    $("#galleryContainer").dxGallery({
        dataSource: [
            "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png",
            "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png",
            "https://js.devexpress.com/Content/images/doc/25_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/25_2/PhoneJS/person1.png",
        "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png",
        "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png"
    ];
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})
Vue
<template>
    <DxGallery
        :data-source="dataSource"
        :height="300"
        :loop="true"
    />
</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/25_2/PhoneJS/person1.png',
                'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png',
                'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.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/25_2/PhoneJS/person1.png',
    'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png',
    'https://js.devexpress.com/Content/images/doc/25_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 property to false. If you need to hide them completely, assign false to the showIndicator property.

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

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

export default {
    components: {
        DxGallery
    },
    data() {
        return {
            dataSource: [
                'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png',
                'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.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/25_2/PhoneJS/person1.png',
    'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png'
];

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

export default App;
See Also

API

NOTE
In this article, the Button UI component is used to switch images. This choice is made for purely demonstrational purposes, and you can do the same operations using another UI component 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/25_2/PhoneJS/person1.png",
            "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png",
            "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png",
            "https://js.devexpress.com/Content/images/doc/25_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/25_2/PhoneJS/person1.png",
        "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png",
        "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png",
        "https://js.devexpress.com/Content/images/doc/25_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.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/25_2/PhoneJS/person1.png',
                'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png',
                'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png',
                'https://js.devexpress.com/Content/images/doc/25_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.light.css';

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

const dataSource = [
    'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png',
    'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png',
    'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png',
    'https://js.devexpress.com/Content/images/doc/25_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.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;
See Also