swiper基本使用

这里参考官网swiper的使用方法。详情戳–>swiper中文网

使用步骤

准备工作

到swiper中文网中下载swiper（首页顶部获取swiper，这里下载5版本，更稳定）。
然后解压缩，将package文件夹下的js和css文件夹复制到目标文件夹中开始练习。

这里需要一个静态页面–>创建index.html文件。

加载插件

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

添加html内容

这里注意Swiper7的默认容器是.swiper，Swiper6之前是.swiper-container。所以要将官网代码中的swiper改成swiper-container。

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

这里添加一个css样式（长和宽方便调试）

<style>
        .swiper-container{
            width: 600px;
            height:400px;
        }
    </style>

初始化swiper

这里需要注意：在页面中结构已经存在的条件下，再初始化Swiper实例！！（没有结构JS不能操作DOM）
官网的代码设置direction: 'vertical'是垂直切换循环，该属性值默认是水平方向。由于在web中常用水平循环，将这一行删掉。

// 当页面中结构已经有了的时候，再初始化swiper实例！！！
    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',
    },
  })     

运行效果：