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/18_2/PhoneJS/person1.png",
            "https://js.devexpress.com/Content/images/doc/18_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/18_2/PhoneJS/person1.png",
        "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person2.png"
    ];
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})

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/18_2/PhoneJS/person1.png",
            "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person2.png",
            "https://js.devexpress.com/Content/images/doc/18_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/18_2/PhoneJS/person1.png",
        "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person2.png",
        "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person3.png"
    ];
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})

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/18_2/PhoneJS/person1.png",
            "https://js.devexpress.com/Content/images/doc/18_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/18_2/PhoneJS/person1.png",
        "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person2.png"
    ];
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})
See Also

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 () {
    var gallery = $("#galleryContainer").dxGallery({
        dataSource: [
            "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person1.png",
            "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person2.png",
            "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person3.png",
            "https://js.devexpress.com/Content/images/doc/18_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) gallery: DxGalleryComponent;
    galleryDataSource = [
        "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person1.png",
        "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person2.png",
        "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person3.png",
        "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person4.png"
    ];
    goToNextItem () {
        this.gallery.instance.nextItem(true);
    }
    goToPreviousItem () {
        this.gallery.instance.prevItem(true);
    }
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule,
        DxButtonModule
    ],
    // ...
})

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
var 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) gallery: DxGalleryComponent;
    goToItem (index) {
        this.gallery.goToItem(index, true);
    }
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})
See Also