DevExtreme React - 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_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, 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_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 ], // ... })
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.