Angular Gallery - Enable the Slideshow

The Gallery UI component supports the display of images in a slideshow. To specify the time span that the UI component must wait before moving on to the next image, assign a positive number to the slideshowDelay property. This number specifies the time span in milliseconds. If it is zero, slideshow is disabled.

jQuery
JavaScript
$(function () {
    $("#galleryContainer").dxGallery({
        dataSource: [
            "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png",
            "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png",
            "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png"
        ],
        height: 300,
        slideshowDelay: 1500
    });
});
Angular
HTML
TypeScript
<dx-gallery
    [dataSource]="galleryDataSource"
    [height]="300"
    [slideshowDelay]="1500">
</dx-gallery>
import { DxGalleryModule } from "devextreme-angular";
// ...
export class AppComponent {
    galleryDataSource = [
        "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png",
        "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png",
        "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png"
    ];
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})
Vue
<template>
    <DxGallery
        :data-source="dataSource"
        :height="300"
        :slideshow-delay="1500"
    />
</template>

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

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

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

class App extends React.Component {
    render() {
        return (
            <Gallery
                dataSource={dataSource}
                height={300}
                slideshowDelay={1500}
            />
        );
    }
}

export default App;
See Also