Animate the Image Change

By default, the change of the image is animated. You can specify how long the animation is using the animationDuration option. The lower its value, the faster the animation. In case you need to disable animation completely, set the animationEnabled option to false.

jQuery

JavaScript

$(function () {
    $("#galleryContainer").dxGallery({
        dataSource: [
            "https://js.devexpress.com/Content/images/doc/18_1/PhoneJS/person1.png",
            "https://js.devexpress.com/Content/images/doc/18_1/PhoneJS/person2.png",
            "https://js.devexpress.com/Content/images/doc/18_1/PhoneJS/person3.png"
        ],
        height: 300,
        loop: true,
        animationDuration: 100
    });
});

Angular

HTML

TypeScript

<dx-gallery
    [dataSource]="galleryDataSource"
    [height]="300"
    [loop]="true"
    [animationDuration]="100">
</dx-gallery>

import { DxGalleryModule } from "devextreme-angular";
// ...
export class AppComponent {
    galleryDataSource = [
        "https://js.devexpress.com/Content/images/doc/18_1/PhoneJS/person1.png",
        "https://js.devexpress.com/Content/images/doc/18_1/PhoneJS/person2.png",
        "https://js.devexpress.com/Content/images/doc/18_1/PhoneJS/person3.png"
    ];
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})

Animate the Image Change

jQuery

Angular

See Also