Swiper基础用法

本文总结下Swiper插件的基础用法

主要分为3个步骤：①引入文件；②构建页面结构；③初始化激活Swiper

之后Swiper便可以进行简单切换了

下面来依次介绍下：
（1）引入文件

需要用到的文件有swiper.min.js和swiper.min.css文件，可下载Swiper文件或使用CDN

<link rel="stylesheet" href="./css/swiper.min.css">
<script src="./js/swiper.min.js"></script>

若需要用到jQuery，则在swiper.min.js之前引入即可

<script src="./js/jquery.min.js"></script>

（2）构建页面结构

组成：

①swiper-container容器；②swiper-wrapper包装；③swiper-slide滑动；④swiper-pagination分页；

⑤swiper-button-prev和swiper-button-prev（上下页按钮）；⑥swiper-scrollbar滚动条；

<style type="text/css">
   .swiper-container {/*自定义swiper大小*/
       width: 600px;
       height: 300px;
   }  
</style>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
<!--导航等组件可以放在container之外-->

（3）初始化激活Swiper

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true,
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
</script>

如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。

<script type="text/javascript">
   window.onload = function() {
        ...
   }
</script>

或者这样（Jquery和Zepto）

<script type="text/javascript">
   $(document).ready(function () {
       ...
   })
</script>

猜你喜欢