All docs
V20.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery Gallery - Animate the Image Change

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

jQuery
JavaScript
$(function () {
    $("#galleryContainer").dxGallery({
        dataSource: [
            "https://js.devexpress.com/Content/images/doc/20_2/PhoneJS/person1.png",
            "https://js.devexpress.com/Content/images/doc/20_2/PhoneJS/person2.png",
            "https://js.devexpress.com/Content/images/doc/20_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/20_2/PhoneJS/person1.png",
        "https://js.devexpress.com/Content/images/doc/20_2/PhoneJS/person2.png",
        "https://js.devexpress.com/Content/images/doc/20_2/PhoneJS/person3.png"
    ];
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})
Vue
<template>
    <DxGallery
        :data-source="dataSource"
        :height="300"
        :loop="true"
        :animation-duration="100"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
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/20_2/PhoneJS/person1.png',
                'https://js.devexpress.com/Content/images/doc/20_2/PhoneJS/person2.png',
                'https://js.devexpress.com/Content/images/doc/20_2/PhoneJS/person3.png'
            ]
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Gallery } from 'devextreme-react/gallery';

const dataSource = [
    'https://js.devexpress.com/Content/images/doc/20_2/PhoneJS/person1.png',
    'https://js.devexpress.com/Content/images/doc/20_2/PhoneJS/person2.png',
    'https://js.devexpress.com/Content/images/doc/20_2/PhoneJS/person3.png'
];

class App extends React.Component {
    render() {
        return (
            <Gallery
                dataSource={dataSource}
                height={300}
                loop={true}
                animationDuration={100}
            />
        );
    }
}

export default App;
See Also