文章目录






一、Swiper 插件简介



1、核心概念


Swiper 是一款 轻量级、高性能、无框架依赖 的 原生 JavaScript 插件 , 同时 提供 Vue/React/Angular 等框架 专属版本 , 核心专注于实现 页面元素 的 轮播、滑动切换 交互 , 广泛应用于移动端和 PC 端项目 ;


Swiper 插件 目前已成为 前端轮播 / 滑动场景的 事实标准 , 常见使用场景包括 :

  • 移动端首页轮播图、商品详情图滑动预览
  • PC 端横幅广告轮播、画廊图片切换
  • 滑动式导航、步骤条、移动端页面左右滑切屏

2、核心特点


Swiper 核心特点 :

  • 跨端兼容优异 : 完美 支持移动端 ( iOS/Android 各类浏览器、微信内置浏览器 ) 和 PC 端 ( Chrome/Firefox/Edge 等 ) , 兼容老旧浏览器 ( 如 IE10+ ) , 无需额外做兼容适配 ;
  • 功能丰富强大 : 不仅 支持基础的水平轮播 , 还提供垂直轮播、循环播放、3D 效果、缩略图联动、无限滑动、自动播放等数十种功能 , 满足各类复杂滑动场景需求 ;
  • 高可定制性 : 暴露 大量可配置参数、钩子函数 ( 回调 ) 和 公共 API , 开发者可自定义滑动速度、切换动画、分页器样式、触发逻辑等 , 实现高度个性化需求 ;
  • 性能流畅高效 : 内置硬件加速机制 , 滑动过程流畅无卡顿 , 同时优化了边界情况 ( 如快速滑动、滑动到首尾 ) , 提升用户体验 ;
  • 模块化与生态完善 : 现代版本 ( Swiper 6+ ) 采用模块化设计 , 可 按需引入功能模块减小文件体积 ; 同时提供框架专属版本 ( swiper/vue、swiper/react ) , 贴合框架语法规范 , 在框架项目中使用更丝滑 ;
  • 无强制依赖 : 原生 JS 版本 无需依赖 jQuery、Vue 等任何库 / 框架 , 可直接在纯 HTML / JS 项目中使用 , 上手门槛低 ;




二、Swiper 插件使用方法



1、下载 Swiper 插件


Swiper 插件 官网 : https://www.swiper.com.cn/ ;

点击顶部的 " 获取 Swiper " 按钮 , 在弹出的 下拉菜单 中 , 选择 " 下载 Swiper " 选项 , 即可进入下载页面 ;

在这里插入图片描述

在下载页面 https://www.swiper.com.cn/download/index.html 中 , 可以选择要下载的 插件版本 , 一般都下载最新版本即可 ;

在这里插入图片描述

最新版的 swiper-11.0.3 的下载地址是 : https://www.swiper.com.cn/download/swiper-11.0.3.zip ;


2、Swiper 插件案例


在首页 中 , 选择 " 在线演示 " 的 " Swiper 基础演示 " ;

在这里插入图片描述

进入到 https://www.swiper.com.cn/demo/index.html 基础演示页面 , 假如我们想要 使用 " 分页器(030) " 案例 ,

在这里插入图片描述


3、Swiper 插件案例源码查看


将下载的 swiper-11.0.3.zip 压缩包 , 解压后得到一个 swiper-11.0.3 目录 , 在 Y:\002_WorkSpace\014_HTML\swiper-11.0.3\swiper\demo 中可以看到 030-pagination.html 文件如下所示 :

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="../swiper-bundle.min.css" />

  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <div class="swiper mySwiper">
    <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 class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <script src="../swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      pagination: {
        el: ".swiper-pagination",
      },
    });
  </script>
</body>

</html>

4、Swiper 插件案例源码分析


在上述代码中 , 发现引入了 ../swiper-bundle.min.js 样式文件 ,

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="../swiper-bundle.min.css" />

和 ../swiper-bundle.min.js JS 脚本 , 注意 引入 JS 脚本时 , 先引入第三方 JS 脚本 , 再引入自己写的 JS 脚本 ;

  <!-- Swiper JS -->
  <script src="../swiper-bundle.min.js"></script>

使用 Swiper 实现轮播图 必须使用如下 HTML 结构 , 不要更改 下面的 HTML 结构的 CSS 类名 ;

  <!-- Swiper -->
  <div class="swiper mySwiper">
    <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 class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

将下面的与 Swiper 插件样式相关的代码 复制到自己的代码中 ;

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

使用 Swiper 实现轮播图 的 JS 代码如下所示 :

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      pagination: {
        el: ".swiper-pagination",
      },
    });
  </script>

5、Swiper 插件 API 文档


在上述的 js 代码中有如下配置 , Swiper 构造函数中 , 配置的 pagination 等选项 ;

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      pagination: {
        el: ".swiper-pagination",
      },
    });
  </script>

这些配置都可以在 Swiper API 文档 https://www.swiper.com.cn/api/index.html 中找到 , 下面的截图中展示的就是 分页器 pagination 组件的 相关配置 ;
在这里插入图片描述





三、Swiper 插件使用步骤



0、使用文档


在 Swiper 中文教程页面 https://www.swiper.com.cn/usage/index.html 中 , 有 Swiper 插件的详细用法 :

在这里插入图片描述


1、步骤一 : 加载插件


加载 Swiper 插件 , 最新版的 插件 需要用到的文件有 swiper-bundle.min.js 和 swiper-bundle.min.css 文件 ;

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper-bundle.min.js"></script>
    ...
</body>
</html>

2、步骤二 : 加载插件


在 HTML 页面中 添加 HTML 内容 , Swiper7 的默认容器是 '.swiper' , Swiper6之前是 '.swiper-container' ;

<div class="swiper">
    <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>
<!-- 导航等组件可以放在Swiper容器之外 -->

3、步骤三 : 设置 Swiper 轮播图大小


给 Swiper 定义一个大小 , 为 HTML 结构的最外层的 <div class="swiper"> 布局设置 大小属性 , 也可以不设置 ;

.swiper {
    width: 600px;
    height: 300px;
}

4、步骤四 : 初始化 Swiper


使用下面的代码 初始化 Swiper ;

<script>        
  var mySwiper = new Swiper ('.swiper', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>
# 前端 # javascript # 开发语言
Logo
快递鸟一站式物流API解决方案

电商企业物流数字化转型必备！快递鸟 API 接口，72 小时快速完成物流系统集成。全流程实战1V1指导，营造开放的API技术生态圈。

更多推荐

如何用Saleor打造AI驱动的电商平台：10个关键应用场景解析

Saleor是一个高性能、可组合的无头电商API平台，它通过灵活的架构设计为电商业务提供强大支持。在AI技术快速发展的今天，Saleor的模块化设计使其能够无缝集成各类人工智能功能，为电商企业带来智能化升级。本文将详细介绍Saleor平台中机器学习和AI技术的10个关键应用场景，帮助你快速理解如何利用这一开源工具构建智能电商系统。## 1. 智能产品搜索优化Saleor内置了强大的产品搜索

avatar 快递鸟社区

Pie库测试驱动开发：如何为切片操作编写高质量的单元测试

Pie库是一个专注于类型安全和性能的Go语言切片与映射操作工具库。本文将详细介绍如何通过测试驱动开发（TDD）为Pie库的切片操作编写高质量单元测试，帮助开发者确保代码可靠性并提升开发效率。## 为什么选择测试驱动开发？测试驱动开发（TDD）是一种先编写测试用例再实现功能的开发方法。对于Pie库这类工具库而言，TDD带来三大核心价值：- **类型安全保障**：通过测试验证切片操作的类型约

avatar 快递鸟社区
cover

面了极兔的大模型算法岗，薪资给的很满意！！！

avatar 快递鸟社区