Scrolling Carousels

gistfile1.txt

{
    index: function(interaction) {
        // Create a Carousel of Items
        var carousel1 = new Wbx.views.Carousel({
            defaults: {
                cls: 'card'
            },
			height: '280',
            width: '320',
            items: [{
                html: ' < h1 > Carousel < /h1><p>Navigate the two carousels on this page by swiping left/right or clicking on one side of the circle indicators below. < /p>'
            },
            {
                title: 'Tab 2',
                html: '2'
            },
            {
                title: 'Tab 3',
                html: '3'
            }]
        });

        var carousel2 = new Wbx.views.Carousel({
            defaults: {
                cls: 'card'
            },
			height: '280',
            width: '320',
            items: [{
                html: '<h1>Carousel</h1 > <p > Navigate the two carousels on this page by swiping left / right or clicking on one side of the circle indicators below. < /p>'
            },
            {
                title: 'Tab 2',
                html: '2'
            },
            {
                title: 'Tab 3',
                html: '3'
            }]
        });

		var carousel3 = new Wbx.views.Carousel({
            defaults: {
                cls: 'card'
            },
			height: '280',
            width: '320',
            items: [{
                html: '<h1>Carousel</h1 > <p > Navigate the two carousels on this page by swiping left / right or clicking on one side of the circle indicators below. < /p>'
            },
            {
                title: 'Tab 2',
                html: '2'
            },
            {
                title: 'Tab 3',
                html: '3'
            }]
        });

        var index = new Wbx.views.AbstractView({
            layout: {
                type: 'vbox'
            },
            items: [carousel1, carousel2, carousel3]
        });


        this.renderIndex(index, interaction);
  }
}