swiper的使用

swiper的使用

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端.

1 加载插件 需要先引入 swiper.min.css 与 swiper.min.css

下载地址: https://www.swiper.com.cn/

2 插件需要特定的HTMl结构

3 引入HTML内容

<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之外

4 可以定义大小,但基本不需要 移动端基本都是使用一个容器包裹

5 HTML内容添加完成之后需要 初始化 Swiper 调用js 引入的话 需要注意 swiper.js 需要在引入自定义的js前面 .不然会报错

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    autoplay: true,//可选选项，自动滑动等同下方的设置
    /*autoplay: {
    delay: 3000, //3秒切换一次  
    disableOnInteraction: true / false, //用户滑动轮播图之后，是否禁止自动轮播图 默认是 true 禁止
    },*/
    
    initialSlide :2,//可设置初始化显示的是哪张图片
    loop: true,  //设置是否无缝循环,如果设置为false 只会循环一次
    effect : 'fade',//设置切换的格式 slide的切换效果，默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
    
    // 如果需要分页器设置位置可以使用position 进行重置 
    pagination: {
      el: '.swiper-pagination',
      bulletElement : 'span',//索引器的设定分页器指示器（小点）的HTML标签。
      type: 'bullets',//设置索引器的形状 
        //‘bullets’  圆点（默认）  ‘fraction’  分式 
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>
</body>