仿站常用

1、添加swiper滚动banner(swiper 3)

  初始化

 

<section id="banner" class="container-fluid">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="{dede:global.cfg_templets_skin/}/images/1530593129-7168.jpg">
      </div>
      <div class="swiper-slide">
        <img src="{dede:global.cfg_templets_skin/}/images/1530593148-3400.jpg">
      </div>
      <div class="swiper-slide">
        <img src="{dede:global.cfg_templets_skin/}/images/1530697020-3720.jpg">
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</section>

 

<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/../plugin/swiper/swiper.js"></script>
<link rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_skin/}/../plugin/swiper/swiper.css">
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    autoplay: 3000,
    height: 400,
    prevButton:'.swiper-button-prev',
    nextButton:'.swiper-button-next',
    pagination : '.swiper-pagination',
    paginationClickable :true,
    
  })        
</script>

 

posted @ 2018-07-02 09:08  jyLi  阅读(127)  评论(0编辑  收藏  举报