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
$(function () { $("#galleryContainer").dxGallery({ dataSource: [ "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png", "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png" ], height: 300, swipeEnabled: false, showNavButtons: true }); });
Angular
<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/24_2/PhoneJS/person1.png", "https://js.devexpress.com/Content/images/doc/24_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/24_2/PhoneJS/person1.png', 'https://js.devexpress.com/Content/images/doc/24_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/24_2/PhoneJS/person1.png', 'https://js.devexpress.com/Content/images/doc/24_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
$(function () { $("#galleryContainer").dxGallery({ dataSource: [ "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png", "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png", "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png" ], height: 300, loop: true }); });
Angular
<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/24_2/PhoneJS/person1.png", "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png", "https://js.devexpress.com/Content/images/doc/24_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/24_2/PhoneJS/person1.png', 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png', 'https://js.devexpress.com/Content/images/doc/24_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/24_2/PhoneJS/person1.png', 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png', 'https://js.devexpress.com/Content/images/doc/24_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
$(function () { $("#galleryContainer").dxGallery({ dataSource: [ "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png", "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png" ], height: 300, indicatorEnabled: false }); });
Angular
<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/24_2/PhoneJS/person1.png", "https://js.devexpress.com/Content/images/doc/24_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/24_2/PhoneJS/person1.png', 'https://js.devexpress.com/Content/images/doc/24_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/24_2/PhoneJS/person1.png', 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png' ]; class App extends React.Component { render() { return ( <Gallery dataSource={dataSource} height={300} indicatorEnabled={false} /> ); } } export default App;
See Also
API
To switch the Gallery to the next or previous image, call the nextItem(animation) or prevItem(animation) method, respectively.
jQuery
$(function () { const gallery = $("#galleryContainer").dxGallery({ dataSource: [ "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png", "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png", "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png", "https://js.devexpress.com/Content/images/doc/24_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
<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/24_2/PhoneJS/person1.png", "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png", "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png", "https://js.devexpress.com/Content/images/doc/24_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/24_2/PhoneJS/person1.png', 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png', 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png', 'https://js.devexpress.com/Content/images/doc/24_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/24_2/PhoneJS/person1.png', 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png', 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png', 'https://js.devexpress.com/Content/images/doc/24_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
const gallery = $("#galleryContainer").dxGallery("instance"); // Goes to the third image gallery.goToItem(2, true);
Angular
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
If you have technical questions, please create a support ticket in the DevExpress Support Center.