@var n is d.FlashMod("banner") {
<link href="@{d.SkinPath}/static/css/idangerous.swiper.css" rel="stylesheet" />
<script src="@{d.SkinPath}/static/js/idangerous.swiper.js"></script>
<style type="text/css">
    .swiper-button-prev,
    .swiper-button-next {
        margin-top: -15px;
        width: 17px;
        height: 30px;
        cursor: pointer;
        top: 50%;
        position: absolute;
    }

    .swiper-button-prev {
        background: url(@{d.SkinPath}/static/css/img/arrows.png) no-repeat left top;
        left: 50px;
    }

    .swiper-button-next {
        background: url(@{d.SkinPath}/static/css/img/arrows.png) no-repeat left bottom;
        right: 50px;
    }

    .swiper-pagination {
        position: absolute;
        z-index: 20;
        bottom: 10px;
        width: 100%;
        text-align: center;
    }

    .swiper-pagination-switch {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 8px;
        background: #555;
        margin: 0 5px;
        opacity: 0.8;
        border: 1px solid #fff;
        cursor: pointer;
    }

    .swiper-active-switch {
        background: #fff;
    }
</style>
<div style="width:100%" class="swiper-container" @{n.Attrs}>
    <div class="swiper-wrapper">
        @for m in n.Items {
        <img alt="@{m.Text}" class="swiper-slide" src="@{m.Image}" style="cursor:pointer;" />
        @}
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        loop: true,
        calculateHeight: true,
        autoplay: '@{n.AutoPlay}',
        speed: '@{n.Speed}',
        mode: '@{n.Direction}',
        pagination: '.swiper-pagination',
        paginationClickable: true,
        onSetWrapperTransition: function(swiper, speed) {
            for (var i = 0; i < swiper.slides.length; i++) {
                swiper.setTransition(swiper.slides[i], speed);
            }
            swiper.startAutoplay();
        },
        onSlidePrev: function(swiper) {
            swiper.startAutoplay();
        },
        onSlideNext: function(swiper) {
            swiper.startAutoplay();
        }
    });
    $('.swiper-button-prev').click(function(e) {
        e.preventDefault();
        mySwiper.swipePrev();
    });
    $('.swiper-button-next').click(function(e) {
        e.preventDefault();
        mySwiper.swipeNext();
    });
    $(function() {
        mySwiper.swipeNext();
    });
</script>
@}