JavaScript/jQuery 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.
jQuery
HTML
JavaScript
<div id="galleryContainer"></div>
$(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",
"https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person4.png"
],
height: 300
});
});Angular
HTML
TypeScript
<dx-gallery
[dataSource]="galleryDataSource"
[height]="300">
</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",
"https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person4.png"
];
}
@NgModule({
imports: [
// ...
DxGalleryModule
],
// ...
})Vue
<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>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',
'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person4.png'
];
class App extends React.Component {
render() {
return (
<Gallery
dataSource={dataSource}
height={300}
/>
);
}
}
export default App;See Also
jQuery
Angular
Vue
React
Feedback