Vue Gallery - Overview
The Gallery is a UI component that displays a collection of images in a carousel. The UI component is supplied with various navigation controls that allow a user to switch between images.
The following code adds the Gallery UI component to your page. The simplest configuration of the UI component requires only a dataSource and height to be specified.
- 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_1/PhoneJS/person1.png',
- 'https://js.devexpress.com/Content/images/doc/20_1/PhoneJS/person2.png',
- 'https://js.devexpress.com/Content/images/doc/20_1/PhoneJS/person3.png',
- 'https://js.devexpress.com/Content/images/doc/20_1/PhoneJS/person4.png'
- ];
- class App extends React.Component {
- render() {
- return (
- <Gallery
- dataSource={dataSource}
- height={300}
- />
- );
- }
- }
- export default App;
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Gallery - Switch Between Images
- Gallery - Set the Initial Image
- Gallery - Enable the Slideshow
- Gallery - Animate the Image Change
- Gallery - Transform and Combine Images
- Gallery - Customize Item Appearance
- Gallery Demos
- Gallery API Reference
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.