多个swiper的循环写法

<div>
  #foreach($pVO in $!proList)
  <div class="p_flex">
    <div class="p_left">
      <div class="p_content">
        <div class="p_cn">$pVO.nameValue</div>
        <div class="p_en">$pVO.summaryValue</div>
      </div>
    </div>
    <div class="proSwiperBox">
      <div class="swiper-container swiper-pro$velocityCount">
        <div class="swiper-wrapper">
          #foreach($pimg in $pVO.productImages)
          <div class="swiper-slide">
            <div class="pic_box">
              #img("$!pimg.url","class='proPic' alt='$!pVO.nameValue'",false)
            </div>
          </div>
          #end
        </div>
      </div>
      <div class="swiper-button s_prev s_prev$velocityCount">
        <i class="iconfont">&#xe687;</i>
      </div>
      <div class="swiper-button s_next s_next$velocityCount">
        <i class="iconfont">&#xe6ae;</i>
      </div>
      <div class="swiper-pagination sw_pagin$velocityCount"></div>
    </div>
  </div>
  #end
</div>
<script>
  require(['swiper'], function (s) {
    var cun=$(".p_flex").length;
    for (var i = 1; i<=cun ;i++){
      var sw_swiper=[];
      sw_swiper[i] = new Swiper('.swiper-pro'+i, {
        autoplay: 5000, //可选选项,自动滑动 
        loop: true,
        prevButton: '.s_prev'+i,
        nextButton: '.s_next'+i,
        autoplayDisableOnInteraction : false,
        pagination : '.sw_pagin'+i,
        paginationClickable :true
      })
    }
  })
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值