Swiper.js的使用

  下载swiper.min.js和swiper.min.css

  在html头部引入这两个文件,

  <link rel="stylesheet" href="css/swiper.min.css">
  <script src="js/swiper.min.js"></script>
  
       在HTML文件的对应位置添加相应的class名,如: 
       <div class="banner swiper-container" id="banner">
                <div class="swiper-wrapper">
                       <div class="swiper-slide slide1"></div>
                       <div class="swiper-slide slide2"></div>
                       <div class="swiper-slide slide3"></div>
                </div>
                <div class="swiper-pagination"></div>
       </div>
   “这里可以实现banner的背景图片的切换,和轮播图一样的效果,不需要在html引入图片
   在css中引入图片

   nav .banner .swiper-wrapper .slide1{width:100%;height:495px;background: url(../img/banner.png)no-repeat;background-position: center center;}
   nav .banner .swiper-wrapper .slide2{width:100%;height:495px;background: url(../img/banner2.png)no-repeat;background-position: center center;}
           nav .banner .swiper-wrapper .slide3{width:100%;height:495px;background: url(../img/banner3.png)no-repeat;background-position: center center;}”
    
         JavaScript:
 
  var mySwiper = new Swiper ('.swiper-container', {
      direction: 'horizontal', 
      loop: true,
      speed:1000,
      autoplay: {
        delay: 3000,
      },
      scrollbar: {
        el: '.swiper-scrollbar',
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
   });
posted @ 2018-05-18 17:37  独行的心  阅读(323)  评论(0编辑  收藏  举报