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.

<div id="panoramaContainer"></div>
$(function() {
        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