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.
- <template>
- <DxGallery
- :data-source="dataSource"
- :height="300"
- />
- </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',
- 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person4.png'
- ]
- };
- }
- }
- </script>
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.