@foreach (var n in GetFlashModule("banner")) {
<link href="@TemplateRoot/css/idangerous.swiper.css" rel="stylesheet" />
<script src="@TemplateRoot/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(@TemplateRoot/css/img/arrows.png) no-repeat left top;
  left: 50px;
}
.swiper-button-next {
  background: url(@TemplateRoot/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%;min-height:200px;" class="swiper-container" @Html.Raw(n.Attrs)>
    <div class="swiper-wrapper">
        
        @foreach (var d in n.Items) {
        <img alt="@d.Text" class="swiper-slide" src="@d.ImageUrl" 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.Basic.AutoPlay,
        speed: @n.Basic.Speed,
        mode: '@n.Basic.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>
}