Carousel.html

<style disabled>
    .item > img {
        width:    100%;
    }
    .carousel-caption > h4 {
        text-shadow:    1px 1px 1px black;
    }
</style>
<script>
    require(['jquery', 'EasyWebApp', 'BootStrap'],  function ($, EWA) {

        EWA.component(function (data) {

            this.on('ready',  function () {

                this.$_View.find('.carousel').carousel();
            });

            return {
                id:      data.id,
                list:    data
            };
        });
    });
</script>

<div class="carousel slide" id="${view.id}">

    <ol class="carousel-indicators" data-name="list">

        <li data-target="#${scope.id}" data-slide-to="${view.__index__}"
            class="${view.__index__ ? '' : 'active'}"></li>
    </ol>

    <div class="carousel-inner" role="listbox" is="ListView" data-name="list">

        <div class="item ${view.__index__ ? '' : 'active'}">

            <img src="${view.image}" />

            <div class="carousel-caption">
                <h4><!--${view.title}--></h4>
                <p><!--${view.detail}--></p>
            </div>
        </div>
    </div>

    <a class="carousel-control left" href="#${view.id}"
       role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control right" href="#${view.id}"
       role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>