In Code

NOTE: In this article, the Button widget is used to switch images in code. 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.

JavaScript
$(function () {
    var gallery = $("#galleryContainer").dxGallery({
        dataSource: [
            "https://js.devexpress.com/Content/images/doc/16_2/PhoneJS/person1.png",
            "https://js.devexpress.com/Content/images/doc/16_2/PhoneJS/person2.png",
            "https://js.devexpress.com/Content/images/doc/16_2/PhoneJS/person3.png",
            "https://js.devexpress.com/Content/images/doc/16_2/PhoneJS/person4.png"
        ],
        height: 300
    }).dxGallery("instance");

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

    $("#prevButton").dxButton({
        gallery.prevItem(true);
    });
});

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.

JavaScript
$(function () {
    var gallery = $("#galleryContainer").dxGallery({
        dataSource: [
            "https://js.devexpress.com/Content/images/doc/16_2/PhoneJS/person1.png",
            "https://js.devexpress.com/Content/images/doc/16_2/PhoneJS/person2.png",
            "https://js.devexpress.com/Content/images/doc/16_2/PhoneJS/person3.png",
            "https://js.devexpress.com/Content/images/doc/16_2/PhoneJS/person4.png"
        ],
        height: 300
    }).dxGallery("instance");

    $("#buttonContainer").dxButton({
        text: "Go to the third image",
        onClick: function () {
            gallery.goToItem(2, true);
        }
    });
});
See Also