React 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.

  • 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