@var m 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: 30px;
  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" @{m.Attrs}>
    <div class="swiper-wrapper">
        
         @for n in m.Items {
        <img alt="@{n.Text}" class="swiper-slide" src="@{n.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: '@{m.AutoPlay}',
        speed: '@{m.Speed}',
        mode: '@{m.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>
@}