DevExtreme React - Overview

The Panorama widget is a full-screen widget that allows you to arrange items on a long horizontal canvas split into several views. Each view contains several items, and an end user navigates the views with the swipe gesture. The Panorama is often used as a navigation map on the first page of an application.

View Demo

Most primitive Panorama needs an collection of items and a title. In addition, you can specify a backgroundImage. For example, the following code adds a simple Panorama to your page.

HTML
JavaScript
CSS
<div id="panoramaContainer"></div>
$(function() {
    $("#panoramaContainer").dxPanorama({
        items: [{
            title: "Main courses",
            text: "First and second courses of a meal"
        }, {
            title: "Seafood",
            text: "Seafood: ocean and sea"
        },
        // . . .
        ],
        title: "Online Menu",
        backgroundImage: {
            url: '/here/goes/your/image.png',
            height: 600,
            width: 800
        }
    });
});
#panoramaContainer {
    height: auto;
    position: absolute;
    top: 0; 
    bottom: 0;
    width: 100%;
}

Note that all data source items follow the Default Item Template pattern. This provides a default item appearance, which can be customized later.

See Also