Swiper介绍及使用

1. Swiper介绍及使用

https://www.swiper.com.cn/

1. 概念及使用

• 概念

  Swiper是一款专门用来实现滑动效果的插件(适用于移动端和pc端)
  ​
  https://www.swiper.com.cn/

• 基本使用

  • 下载

  • 引入文件 swiper-bundle.min.js和swiper-bundle.min.css

    1. swiper-bundle.min.js和swiper-bundle.min.css  文件默认在 package 文件夹中
    2. 可以将文件单独拷贝使用

  • 设置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>

  • 初始化

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

2. 其他配置介绍

• 查看API文档

• 具体配置选项介绍

  var mySwiper = new Swiper('.swiper-container',{
      //设置默认显示第几个, 从0开始
   initialSlide :2,
      //设置滑动方向, 默认horizontal水平显示, vertical代表垂直显示
      direction : 'vertical',
      //设置切换速度单位毫秒
      speed: 300,
      //设置是否循环切换, false不循环, true循环
      loop : true,
      //是否自动切换
      autoplay: true,
      //设置切换效果 'fade', 'cube'
      effect: 'cube',
      //设置分页
      pagination: {
          el: '.swiper-pagination',
          //点击小圆点切换
          clickable :true,
     },
      //显示上一页,下一页按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
     },
      // 添加滚动条
      scrollbar: {
         el: '.swiper-scrollbar',
     },
      // 设置通过键盘控制
      keyboard : true,
  })

• 样式设置

  .swiper-container{
      --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
      --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
      --swiper-navigation-size: 30px;/* 设置按钮大小 */
      --swiper-pagination-color: #00ff33;/* 设置分页器颜色 */
  }

•