如何安装使用SwiperJS？安装SwiperJS与导入SwiperJS有什么区别？

安装与导入的核心区别 #

这两个是完全独立的步骤，区别如下：

• 安装：属于前置准备操作，指将Swiper的代码包下载到你的项目依赖中，仅使用构建工具的项目需要执行该步骤
• 导入：属于使用前的调用操作，指在业务代码中引入已经安装好的Swiper核心、对应功能模块和样式，所有场景都需要执行（CDN场景的引入操作等价于导入）

不同场景的安装方式 #

1. 无构建工具的静态页面场景 #

如果是纯静态HTML页面开发，不需要使用Vite、Webpack等构建工具，可以直接通过CDN资源引入，该场景不需要执行本地安装命令，引入后可直接全局调用Swiper构造函数：

<!-- 引入Swiper样式文件 -->
<link rel="stylesheet" href="Swiper官方CDN样式地址" />
<!-- 引入Swiper JS文件 -->
<script src="Swiper官方CDN脚本地址"></script>

2. 带构建工具的项目场景（Vue/React/TypeScript项目等） #

首先需要通过包管理器执行安装命令，将Swiper代码包下载到本地项目的node_modules目录中，这一步就是「安装」操作：

• npm安装命令：

npm install swiper

• yarn安装命令：

yarn add swiper

• pnpm安装命令：

pnpm add swiper

导入操作说明 #

安装完成后，需要在你要使用Swiper的代码文件中引入对应资源，这一步就是「导入」操作：

全量导入 #

如果需要使用Swiper的全部功能，可以直接导入完整包：

// 导入Swiper核心JS
import Swiper from 'swiper';
// 导入Swiper全部样式
import 'swiper/css/bundle';

按需导入 #

如果需要减少打包体积，可以只导入需要用到的功能模块：

// 导入核心JS和所需功能模块，示例为导航、分页、自动播放模块
import Swiper, { Navigation, Pagination, Autoplay } from 'swiper';
// 导入核心样式和对应模块的样式
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
// 注册引入的模块，否则功能不生效
Swiper.use([Navigation, Pagination, Autoplay]);

基础使用示例 #

步骤1：编写HTML结构 #

<div class="swiper">
  <!-- 轮播项容器 -->
  <div class="swiper-wrapper">
    <div class="swiper-slide">轮播项1</div>
    <div class="swiper-slide">轮播项2</div>
    <div class="swiper-slide">轮播项3</div>
  </div>
  <!-- 分页器（可选，需导入Pagination模块） -->
  <div class="swiper-pagination"></div>
  <!-- 左右切换箭头（可选，需导入Navigation模块） -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

步骤2：初始化Swiper实例 #

const mySwiper = new Swiper('.swiper', {
  // 基础配置
  direction: 'horizontal', // 轮播方向：horizontal水平 / vertical垂直
  loop: true, // 是否开启循环轮播
  // 分页器配置
  pagination: {
    el: '.swiper-pagination',
    clickable: true // 点击分页器可切换轮播
  },
  // 切换箭头配置
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  // 自动播放配置（需导入Autoplay模块）
  autoplay: {
    delay: 3000, // 轮播间隔3秒
    disableOnInteraction: false // 用户操作后不关闭自动播放
  }
});

内容的提问来源于stack exchange，提问作者Frester's jr