JavaScript/jQuery MultiView - Loop the Views

The MultiView UI component can display views in a loop. The loop mode enables an end user to swipe through the last view to the first and vice versa. To enable this mode, assign true to the loop property.

jQuery
JavaScript
HTML
$(function() {
    $('#multiViewContainer').dxMultiView({
        dataSource: [
            { text: 'Personal Data' },
            { text: 'Contacts' }
        ],
        loop: true
    });
});
<div id="multiViewContainer"></div>
Angular
HTML
TypeScript
<dx-multi-view
    [dataSource]="multiViewItems"
    [loop]="true">
</dx-multi-view>
import { DxMultiViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
    multiViewItems = [
        { text: 'Personal Data' },
        { text: 'Contacts' }
    ];
}
@NgModule({
    imports: [
        // ...
        DxMultiViewModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxMultiView
        :data-source="multiViewItems"
        :loop="true"
    />
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxMultiView from 'devextreme-vue/multi-view';

export default {
    components: {
        DxMultiView
    },
    data() {
        return {
            multiViewItems: [
                { text: 'Personal Data' },
                { text: 'Contacts' }
            ]
        };
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { MultiView } from 'devextreme-react/multi-view';

const multiViewItems = [
    { text: 'Personal Data' },
    { text: 'Contacts' }
];

class App extends React.Component {
    render() {
        return (
            <MultiView
                dataSource={multiViewItems}
                loop={true}
            />
        );
    }
}

export default App;
See Also