【前端】【Swiper轮播图】深入学习swiper，封装vue3，react的ts和js版本组件，可以学到swiper高级应用与技巧

患得患失949

已于 2025-07-03 11:46:55 修改

阅读量493

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端组件前端库文章标签：前端 javascript 学习 swiper 深入学习知识大纲

于 2025-07-03 11:42:32 首次发布

本文链接：https://blog.csdn.net/qq_59344127/article/details/149090744

前端组件同时被 2 个专栏收录

22 篇文章

订阅专栏

前端库

9 篇文章

订阅专栏

第一章 Swiper简介

1.1 Swiper概述

1.1.1 什么是Swiper

Swiper是一款强大且流行的滑动（轮播图）插件😎。它专门为触摸设备设计，能让开发者轻松地在网页或应用中实现各种滑动效果。无论是水平滑动还是垂直滑动，亦或是多列滑动等，Swiper都能很好地支持。

想象一下，你在手机上浏览图片、新闻资讯或者商品展示页面时，手指轻轻滑动就能切换内容，这种流畅的交互体验很多时候就是Swiper实现的👏。它基于JavaScript和CSS3技术，具有高度的可定制性，开发者可以根据自己的需求对滑动的速度、方向、动画效果等进行调整。而且，Swiper还能兼容多种主流浏览器和移动设备，为不同用户提供一致的体验。

1.1.2 Swiper的应用场景

Swiper的应用场景非常广泛，以下是一些常见的例子：

图片轮播：在电商网站的首页，通常会有一个图片轮播区域，展示热门商品、促销活动等信息。用户可以通过左右滑动来查看不同的图片，Swiper可以让图片切换更加平滑自然🎨。
新闻资讯展示：新闻类APP或网站会使用Swiper来展示不同的新闻板块或者头条新闻。用户可以上下滑动查看不同的新闻内容，方便快捷📰。
产品介绍：在产品详情页，可能会有一系列的产品特性图片或者视频，使用Swiper可以让用户通过滑动来逐一了解产品的各个方面🧐。
引导页：很多APP在首次打开时会有引导页，向用户介绍APP的功能和使用方法。Swiper可以实现引导页的滑动切换，让用户轻松浏览各个引导页面🙋‍♂️。

1.2 Swiper版本与特性

1.2.1 不同版本的Swiper特性

Swiper有多个版本，不同版本在功能和特性上会有所差异：

Swiper 3.x：这是一个相对早期的版本，它已经具备了基本的滑动功能，如水平和垂直滑动、分页器、导航按钮等。它的优点是兼容性较好，对于一些对性能要求不是特别高的项目可以使用。不过，随着技术的发展，它的功能相对来说会显得有些局限🤔。
Swiper 4.x：在3.x的基础上进行了很多改进和优化。它增加了一些新的特性，比如支持虚拟滑动、多列滑动等。同时，性能也有所提升，动画效果更加流畅。此外，它还对API进行了优化，让开发者使用起来更加方便👍。
Swiper 5.x：进一步增强了功能，提供了更多的配置选项和事件。例如，它支持懒加载图片，这对于提高页面加载速度非常有帮助。还增加了一些新的过渡效果，让滑动更加生动有趣🎊。
Swiper 6.x及以上版本：这些版本不断跟进最新的技术趋势，在性能和功能上都有了很大的提升。它们支持更多的滑动模式，如嵌套滑动、自由滑动等。并且，对现代浏览器和移动设备的支持更加完善，能提供更好的用户体验🎉。

1.2.2 选择合适的Swiper版本

选择合适的Swiper版本需要考虑以下几个因素：

项目需求：如果项目只需要基本的滑动功能，对性能要求不高，那么Swiper 3.x可能就足够了。但如果项目需要一些高级功能，如虚拟滑动、懒加载等，就可以选择Swiper 5.x或更高版本😃。
兼容性要求：如果项目需要兼容一些较旧的浏览器或设备，那么需要选择兼容性较好的版本。一般来说，较新的版本可能对旧浏览器的支持会有所减弱，所以要根据目标用户的设备情况来选择。
性能要求：如果项目对性能要求较高，希望滑动效果更加流畅，那么建议选择较新的版本，因为它们在性能优化方面做得更好。同时，也要考虑项目的加载速度，如果版本过大可能会影响页面的加载时间，这时需要权衡选择🧐。

总之，选择合适的Swiper版本要综合考虑项目的实际情况，这样才能让Swiper更好地为项目服务👏。

第二章 Vue 3中使用Swiper

2.1 环境搭建

2.1.1 创建Vue 3项目

在开始使用 Vue 3 和 Swiper 之前，我们需要先创建一个 Vue 3 项目。这里我们可以使用 Vue CLI 或者 Vite 来创建项目。
建议直接使用我的开源项目模板github地址

git clone https://github.com/doweinide/vue3-Ts-Tailwind-template.git

使用 Vite 创建项目

Vite 是一个快速的构建工具，能让我们快速搭建 Vue 3 项目。打开终端，执行以下命令：

# 创建一个基于 Vue 3 的 Vite 项目
npm init vite@latest my-vue3-project -- --template vue
# 进入项目目录
cd my-vue3-project
# 安装依赖
npm install

使用 Vue CLI 创建项目

如果你已经全局安装了 Vue CLI，可以使用以下命令创建项目：

# 创建一个 Vue 3 项目
vue create my-vue3-project --default
# 进入项目目录
cd my-vue3-project

2.1.2 安装Swiper

项目创建好后，我们需要安装 Swiper 库。在项目根目录下，打开终端执行以下命令：

npm install swiper

这样就成功安装了 Swiper 库，可以在项目中使用啦😎。

2.2 TS版本使用

2.2.1 引入Swiper及相关样式

在 Vue 3 的组件中，我们需要引入 Swiper 及其样式。打开 src/App.vue 文件，添加以下代码：

<template>
  <!-- 这里是模板内容 -->
</template>

<script lang="ts" setup>
import Swiper from 'swiper';
import 'swiper/css';
</script>

<style scoped>
/* 这里是样式内容 */
</style>

这样就完成了 Swiper 及其样式的引入🧐。

2.2.2 创建Swiper实例（TS类型定义）

在 script 标签中，我们可以创建 Swiper 实例。同时，为了使用 TypeScript 的类型检查，我们需要正确定义 Swiper 实例的类型。

<template>
  <div class="swiper">
    <div class="swiper-wrapper">
      <!-- 这里放置滑动项 -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import Swiper from 'swiper';
import 'swiper/css';

const swiperRef = ref<HTMLElement | null>(null);
let swiperInstance: Swiper | null = null;

onMounted(() => {
  if (swiperRef.value) {
    swiperInstance = new Swiper(swiperRef.value, {
      // 配置选项
    });
  }
});
</script>

<style scoped>
.swiper {
  width: 100%;
  height: 300px;
}
.swiper-wrapper {
  display: flex;
}
</style>

2.2.3 基本结构搭建

在模板中，我们需要搭建 Swiper 的基本结构。Swiper 主要由 swiper 容器、swiper-wrapper 包裹滑动项和 swiper-slide 组成。

<template>
  <div class="swiper" ref="swiperRef">
    <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>
</template>

2.2.4 常见功能实现（滑动、分页等）

滑动功能

Swiper 默认就支持滑动功能，只要我们创建了实例，就可以通过手势滑动。

分页功能

要实现分页功能，我们需要引入分页模块并配置相关选项。

<template>
  <div class="swiper" ref="swiperRef">
    <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>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import Swiper, { Pagination } from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';

const swiperRef = ref<HTMLElement | null>(null);
let swiperInstance: Swiper | null = null;

onMounted(() => {
  if (swiperRef.value) {
    swiperInstance = new Swiper(swiperRef.value, {
      modules: [Pagination],
      pagination: {
        el: '.swiper-pagination',
      },
    });
  }
});
</script>

<style scoped>
.swiper {
  width: 100%;
  height: 300px;
}
.swiper-wrapper {
  display: flex;
}
</style>

2.3 JS版本使用

2.3.1 引入Swiper及相关样式

和 TS 版本类似，在 JS 版本中，我们同样需要引入 Swiper 及其样式。打开 src/App.vue 文件，添加以下代码：

<template>
  <!-- 这里是模板内容 -->
</template>

<script setup>
import Swiper from 'swiper';
import 'swiper/css';
</script>

<style scoped>
/* 这里是样式内容 */
</style>

2.3.2 创建Swiper实例

在 script 标签中创建 Swiper 实例：

<template>
  <div class="swiper" ref="swiperRef">
    <div class="swiper-wrapper">
      <!-- 这里放置滑动项 -->
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Swiper from 'swiper';
import 'swiper/css';

const swiperRef = ref(null);
let swiperInstance = null;

onMounted(() => {
  if (swiperRef.value) {
    swiperInstance = new Swiper(swiperRef.value, {
      // 配置选项
    });
  }
});
</script>

<style scoped>
.swiper {
  width: 100%;
  height: 300px;
}
.swiper-wrapper {
  display: flex;
}
</style>

2.3.3 基本结构搭建

和 TS 版本一样，搭建 Swiper 的基本结构：

<template>
  <div class="swiper" ref="swiperRef">
    <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>
</template>

2.3.4 常见功能实现（滑动、分页等）

滑动功能

默认支持滑动，创建实例即可。

分页功能

引入分页模块并配置：

<template>
  <div class="swiper" ref="swiperRef">
    <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>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Swiper, { Pagination } from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';

const swiperRef = ref(null);
let swiperInstance = null;

onMounted(() => {
  if (swiperRef.value) {
    swiperInstance = new Swiper(swiperRef.value, {
      modules: [Pagination],
      pagination: {
        el: '.swiper-pagination',
      },
    });
  }
});
</script>

<style scoped>
.swiper {
  width: 100%;
  height: 300px;
}
.swiper-wrapper {
  display: flex;
}
</style>

2.4 组件封装与使用

2.4.1 封装Swiper组件

我们可以将 Swiper 封装成一个组件，方便在项目中复用。创建一个 SwiperComponent.vue 文件，添加以下代码：

<template>
  <div class="swiper" ref="swiperRef">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Swiper, { Pagination } from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';

const swiperRef = ref(null);
let swiperInstance = null;

onMounted(() => {
  if (swiperRef.value) {
    swiperInstance = new Swiper(swiperRef.value, {
      modules: [Pagination],
      pagination: {
        el: '.swiper-pagination',
      },
    });
  }
});
</script>

<style scoped>
.swiper {
  width: 100%;
  height: 300px;
}
.swiper-wrapper {
  display: flex;
}
</style>

2.4.2 组件参数配置

我们可以通过 props 来配置组件的参数，例如是否显示分页器等。修改 SwiperComponent.vue 文件：

<template>
  <div class="swiper" ref="swiperRef">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
    <div v-if="showPagination" class="swiper-pagination"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue';
import Swiper, { Pagination } from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';

const props = defineProps({
  showPagination: {
    type: Boolean,
    default: true,
  },
});

const swiperRef = ref(null);
let swiperInstance = null;

onMounted(() => {
  if (swiperRef.value) {
    const config = {
      modules: [],
    };
    if (props.showPagination) {
      config.modules.push(Pagination);
      config.pagination = {
        el: '.swiper-pagination',
      };
    }
    swiperInstance = new Swiper(swiperRef.value, config);
  }
});
</script>

<style scoped>
.swiper {
  width: 100%;
  height: 300px;
}
.swiper-wrapper {
  display: flex;
}
</style>

2.4.3 在Vue 3项目中使用封装组件

在 src/App.vue 文件中使用封装好的组件：

<template>
  <div id="app">
    <SwiperComponent>
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </SwiperComponent>
  </div>
</template>

<script setup>
import SwiperComponent from './SwiperComponent.vue';
</script>

<style scoped>
/* 这里是样式内容 */
</style>

这样，我们就完成了在 Vue 3 项目中使用 Swiper 的整个流程🎉。

第三章 React中使用Swiper

3.1 环境搭建

3.1.1 创建React项目

首先，我们要创建一个新的 React 项目。这里推荐使用 create-react-app 这个工具，它能帮助我们快速搭建一个基础的 React 项目结构。

打开终端，执行以下命令👇：

npx create-react-app react-swiper-demo
cd react-swiper-demo

上面第一行命令会使用 npx 来执行 create-react-app 并创建一个名为 react-swiper-demo 的项目。第二行命令则是进入到这个项目的目录中。

3.1.2 安装Swiper

项目创建好后，我们需要安装 Swiper 库。在项目根目录下的终端中运行以下命令：

npm install swiper

这个命令会从 npm 仓库中下载并安装 Swiper 到我们的项目里😎。

3.2 TS版本使用

3.2.1 引入Swiper及相关样式

在 TypeScript 版本中，我们要在需要使用 Swiper 的组件文件里引入 Swiper 及其样式。假设我们在 App.tsx 中使用，代码如下：

import React from 'react';
import Swiper from 'swiper';
import 'swiper/css';

const App: React.FC = () => {
    return (
        <div>
            {/* 这里后续会添加 Swiper 的结构 */}
        </div>
    );
};

export default App;

这里我们引入了 Swiper 类和它的基础样式文件。

3.2.2 创建Swiper实例（TS类型定义）

接下来，我们要创建 Swiper 实例。在 App.tsx 中添加以下代码：

import React, { useEffect, useRef } from 'react';
import Swiper from 'swiper';
import 'swiper/css';

const App: React.FC = () => {
    const swiperRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        if (swiperRef.current) {
            const swiper = new Swiper(swiperRef.current, {
                // 这里可以添加 Swiper 的配置选项
            });
        }
    }, []);

    return (
        <div ref={swiperRef}>
            {/* 这里后续会添加 Swiper 的结构 */}
        </div>
    );
};

export default App;

这里使用了 useRef 来获取 Swiper 容器的 DOM 节点，然后在 useEffect 中创建 Swiper 实例。

3.2.3 基本结构搭建

Swiper 有特定的 HTML 结构要求。我们在 App.tsx 中完善结构：

import React, { useEffect, useRef } from 'react';
import Swiper from 'swiper';
import 'swiper/css';

const App: React.FC = () => {
    const swiperRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        if (swiperRef.current) {
            const swiper = new Swiper(swiperRef.current, {
                // 这里可以添加 Swiper 的配置选项
            });
        }
    }, []);

    return (
        <div ref={swiperRef} className="swiper">
            <div className="swiper-wrapper">
                <div className="swiper-slide">Slide 1</div>
                <div className="swiper-slide">Slide 2</div>
                <div className="swiper-slide">Slide 3</div>
            </div>
        </div>
    );
};

export default App;

这里的 .swiper 是容器类名，.swiper-wrapper 用来包裹所有的滑动项，.swiper-slide 就是每个具体的滑动项。

3.2.4 常见功能实现（滑动、分页等）

我们可以在创建 Swiper 实例时添加一些配置来实现常见功能，比如滑动和分页。修改 App.tsx 中的 useEffect 部分：

useEffect(() => {
    if (swiperRef.current) {
        const swiper = new Swiper(swiperRef.current, {
            slidesPerView: 1,
            spaceBetween: 10,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });
    }
}, []);

同时，在 return 的结构中添加分页元素：

return (
    <div ref={swiperRef} className="swiper">
        <div className="swiper-wrapper">
            <div className="swiper-slide">Slide 1</div>
            <div className="swiper-slide">Slide 2</div>
            <div className="swiper-slide">Slide 3</div>
        </div>
        <div className="swiper-pagination"></div>
    </div>
);

这里 slidesPerView 表示每页显示的滑动项数量，spaceBetween 是滑动项之间的间距，pagination 配置了分页功能。

3.3 JS版本使用

3.3.1 引入Swiper及相关样式

在 JavaScript 版本中，同样要引入 Swiper 及其样式。在 App.js 中添加以下代码：

import React from 'react';
import Swiper from 'swiper';
import 'swiper/css';

const App = () => {
    return (
        <div>
            {/* 这里后续会添加 Swiper 的结构 */}
        </div>
    );
};

export default App;

3.3.2 创建Swiper实例

在 App.js 中创建 Swiper 实例：

import React, { useEffect, useRef } from 'react';
import Swiper from 'swiper';
import 'swiper/css';

const App = () => {
    const swiperRef = useRef(null);
    useEffect(() => {
        if (swiperRef.current) {
            const swiper = new Swiper(swiperRef.current, {
                // 这里可以添加 Swiper 的配置选项
            });
        }
    }, []);

    return (
        <div ref={swiperRef}>
            {/* 这里后续会添加 Swiper 的结构 */}
        </div>
    );
};

export default App;

3.3.3 基本结构搭建

和 TS 版本类似，完善 HTML 结构：

import React, { useEffect, useRef } from 'react';
import Swiper from 'swiper';
import 'swiper/css';

const App = () => {
    const swiperRef = useRef(null);
    useEffect(() => {
        if (swiperRef.current) {
            const swiper = new Swiper(swiperRef.current, {
                // 这里可以添加 Swiper 的配置选项
            });
        }
    }, []);

    return (
        <div ref={swiperRef} className="swiper">
            <div className="swiper-wrapper">
                <div className="swiper-slide">Slide 1</div>
                <div className="swiper-slide">Slide 2</div>
                <div className="swiper-slide">Slide 3</div>
            </div>
        </div>
    );
};

export default App;

3.3.4 常见功能实现（滑动、分页等）

同样添加滑动和分页配置：

useEffect(() => {
    if (swiperRef.current) {
        const swiper = new Swiper(swiperRef.current, {
            slidesPerView: 1,
            spaceBetween: 10,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });
    }
}, []);

并在结构中添加分页元素：

return (
    <div ref={swiperRef} className="swiper">
        <div className="swiper-wrapper">
            <div className="swiper-slide">Slide 1</div>
            <div className="swiper-slide">Slide 2</div>
            <div className="swiper-slide">Slide 3</div>
        </div>
        <div className="swiper-pagination"></div>
    </div>
);

3.4 组件封装与使用

3.4.1 封装Swiper组件

我们可以把 Swiper 封装成一个独立的组件，方便在项目中复用。创建一个 SwiperComponent.jsx 文件：

import React, { useEffect, useRef } from 'react';
import Swiper from 'swiper';
import 'swiper/css';

const SwiperComponent = ({ slides }) => {
    const swiperRef = useRef(null);
    useEffect(() => {
        if (swiperRef.current) {
            const swiper = new Swiper(swiperRef.current, {
                slidesPerView: 1,
                spaceBetween: 10,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            });
        }
    }, []);

    return (
        <div ref={swiperRef} className="swiper">
            <div className="swiper-wrapper">
                {slides.map((slide, index) => (
                    <div key={index} className="swiper-slide">{slide}</div>
                ))}
            </div>
            <div className="swiper-pagination"></div>
        </div>
    );
};

export default SwiperComponent;

3.4.2 组件参数配置

在这个组件中，我们通过 props 接收 slides 数组，它包含了所有的滑动项内容。这样我们可以根据不同的需求传入不同的滑动项。

3.4.3 在React项目中使用封装组件

在 App.js 中使用封装好的组件：

import React from 'react';
import SwiperComponent from './SwiperComponent';

const App = () => {
    const slides = ['Slide A', 'Slide B', 'Slide C'];
    return (
        <div>
            <SwiperComponent slides={slides} />
        </div>
    );
};

export default App;

这样我们就可以在项目中方便地使用封装好的 Swiper 组件啦👏。

第四章原生JS中使用Swiper

4.1 引入Swiper资源

4.1.1 引入CSS文件

在使用Swiper之前，我们需要先引入其CSS文件，这样才能让Swiper的滑动效果和样式正常显示😎。你可以通过CDN或者本地文件的方式来引入。

使用CDN引入：在HTML文件的<head>标签中添加以下代码：

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

这种方式简单方便，无需下载文件，直接从网络获取资源。

本地文件引入：首先，你需要从Swiper的官方网站下载CSS文件。然后，将下载好的文件放在项目的合适目录下，比如css文件夹。接着，在HTML文件的<head>标签中添加如下代码：

<link rel="stylesheet" href="css/swiper-bundle.min.css">

4.1.2 引入JS文件

除了CSS文件，我们还需要引入Swiper的JS文件，这样才能实现滑动的交互功能👏。同样，也可以通过CDN或者本地文件的方式引入。

使用CDN引入：在HTML文件的<body>标签结束之前添加以下代码：

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

这样在页面加载完成后，就能使用Swiper的功能了。

本地文件引入：先从官方网站下载JS文件，将其放在项目的合适目录，例如js文件夹。然后，在HTML文件的<body>标签结束之前添加如下代码：

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

4.2 创建HTML结构

4.2.1 Swiper容器结构

Swiper需要一个特定的容器结构来包裹幻灯片。在HTML文件中，添加以下代码来创建Swiper容器：

<div class="swiper">
    <!-- 这里将放置幻灯片 -->
</div>

这个<div>元素就是Swiper的容器，它是整个滑动效果的基础🤗。

4.2.2 幻灯片结构

在Swiper容器内，我们需要创建幻灯片。每个幻灯片都应该放在一个具有特定类名的<div>元素中。代码如下：

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

.swiper-wrapper：这个类名的<div>元素用于包裹所有的幻灯片，它是幻灯片的父容器。
.swiper-slide：每个具有这个类名的<div>元素就是一个幻灯片，可以在里面添加图片、文字等内容。

4.3 TS版本使用

4.3.1 初始化Swiper实例（TS类型定义）

在TypeScript中使用Swiper，需要进行类型定义，这样可以让代码更具可读性和可维护性😃。以下是初始化Swiper实例的代码：

import Swiper, { Navigation, Pagination } from 'swiper';

// 安装所需的模块
Swiper.use([Navigation, Pagination]);

// 初始化Swiper实例
const swiper = new Swiper('.swiper', {
    // 这里可以添加配置选项
});

import语句：用于导入Swiper和所需的模块，如Navigation（导航按钮）和Pagination（分页器）。
Swiper.use：用于安装所需的模块，让Swiper支持相应的功能。
new Swiper：创建一个Swiper实例，参数.swiper表示要应用Swiper的容器选择器。

4.3.2 基本配置与功能实现

在初始化Swiper实例时，可以添加一些配置选项来实现不同的功能。以下是一个示例：

import Swiper, { Navigation, Pagination } from 'swiper';

Swiper.use([Navigation, Pagination]);

const swiper = new Swiper('.swiper', {
    // 自动播放
    autoplay: {
        delay: 3000, // 每隔3秒切换一次幻灯片
    },
    // 导航按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    // 分页器
    pagination: {
        el: '.swiper-pagination',
        clickable: true, // 分页器可以点击
    },
});

autoplay：设置幻灯片自动播放的时间间隔。
navigation：添加导航按钮，通过nextEl和prevEl指定按钮的选择器。
pagination：添加分页器，通过el指定分页器的选择器，clickable设置为true表示分页器可以点击。

4.4 JS版本使用

4.4.1 初始化Swiper实例

在JavaScript中使用Swiper，初始化实例的方法相对简单。以下是代码示例：

// 初始化Swiper实例
const swiper = new Swiper('.swiper', {
    // 这里可以添加配置选项
});

和TypeScript类似，通过new Swiper创建一个Swiper实例，参数.swiper表示要应用Swiper的容器选择器。

4.4.2 基本配置与功能实现

同样，在初始化Swiper实例时，可以添加配置选项来实现不同的功能。以下是一个示例：

const swiper = new Swiper('.swiper', {
    // 循环播放
    loop: true,
    // 滑动速度
    speed: 500, // 滑动动画持续500毫秒
    // 分页器
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets', // 分页器类型为圆点
    },
});

loop：设置为true表示幻灯片可以循环播放。
speed：设置幻灯片滑动的速度，单位为毫秒。
pagination：添加分页器，通过el指定分页器的选择器，type设置分页器的类型。

通过以上步骤，你就可以在原生JS中使用Swiper实现各种滑动效果啦🎉！

第五章 Swiper所有参数详解

5.1 核心参数

5.1.1 direction（滑动方向）

direction 参数用于设置 Swiper 的滑动方向，它有两个主要取值：

‘horizontal’（默认值）：表示水平滑动，就像我们平时在手机上左右滑动图片一样😉。例如，在展示横向排列的商品图片时，使用水平滑动可以方便用户浏览不同的商品。

var mySwiper = new Swiper('.swiper-container', {
    direction: 'horizontal',
});

‘vertical’：表示垂直滑动，类似于在一些新闻 APP 中上下滑动浏览文章列表。比如在制作一个竖向的图片展示页面时，使用垂直滑动会更符合用户的操作习惯。

var mySwiper = new Swiper('.swiper-container', {
    direction: 'vertical',
});

5.1.2 loop（循环模式）

loop 参数用于开启或关闭 Swiper 的循环模式，取值为布尔类型：

true：开启循环模式，当滑动到最后一张幻灯片时，再继续滑动会无缝切换到第一张幻灯片，反之亦然，给人一种无限循环的感觉🎡。例如在制作轮播图时，使用循环模式可以让用户持续浏览内容。

var mySwiper = new Swiper('.swiper-container', {
    loop: true,
});

false（默认值）：关闭循环模式，当滑动到最后一张幻灯片时，就无法再继续往后滑动了。

5.1.3 speed（滑动速度）

speed 参数用于设置 Swiper 滑动的速度，单位是毫秒（ms）。数值越小，滑动速度越快；数值越大，滑动速度越慢。例如：

var mySwiper = new Swiper('.swiper-container', {
    speed: 300, // 滑动速度为 300 毫秒
});

可以根据实际需求调整滑动速度，比如在展示重要信息的轮播图中，可以适当调慢速度，让用户有足够的时间看清内容。

5.1.4 autoplay（自动播放）

autoplay 参数用于设置 Swiper 是否自动播放，它可以是一个布尔值，也可以是一个对象：

布尔值：
- true：开启自动播放，Swiper 会按照默认的时间间隔自动切换幻灯片。

var mySwiper = new Swiper('.swiper-container', {
    autoplay: true,
});

- **false（默认值）**：关闭自动播放，需要用户手动滑动幻灯片。

对象：可以通过对象来更详细地配置自动播放，例如设置自动播放的时间间隔、是否在交互后停止自动播放等。

var mySwiper = new Swiper('.swiper-container', {
    autoplay: {
        delay: 5000, // 自动播放的时间间隔为 5000 毫秒（即 5 秒）
        disableOnInteraction: false, // 交互后不停止自动播放
    },
});

5.2 分页参数

5.2.1 pagination（分页器）

pagination 参数用于设置 Swiper 的分页器，通过指定分页器的容器元素来显示分页指示器。例如：

var mySwiper = new Swiper('.swiper-container', {
    pagination: {
        el: '.swiper-pagination', // 指定分页器的容器元素
    },
});

在 HTML 中，需要有对应的分页器容器元素：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- 幻灯片内容 -->
    </div>
    <div class="swiper-pagination"></div>
</div>

5.2.2 pagination.type（分页器类型）

pagination.type 参数用于设置分页器的类型，有以下几种取值：

‘bullets’（默认值）：显示小圆点分页器，每个小圆点代表一张幻灯片，简洁明了😃。

var mySwiper = new Swiper('.swiper-container', {
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
    },
});

‘fraction’：显示分数形式的分页器，例如“1/5”，表示当前是第 1 张幻灯片，总共有 5 张幻灯片。

var mySwiper = new Swiper('.swiper-container', {
    pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
    },
});

‘progressbar’：显示进度条分页器，随着幻灯片的滑动，进度条会相应地增长或缩短。

var mySwiper = new Swiper('.swiper-container', {
    pagination: {
        el: '.swiper-pagination',
        type: 'progressbar',
    },
});

‘custom’：自定义分页器，需要通过 renderCustom 函数来实现自定义的分页器样式和逻辑。

5.2.3 pagination.clickable（分页器是否可点击）

pagination.clickable 参数用于设置分页器是否可点击，取值为布尔类型：

true：分页器可点击，用户点击分页器上的某个指示器时，Swiper 会自动切换到对应的幻灯片👍。

var mySwiper = new Swiper('.swiper-container', {
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
});

false（默认值）：分页器不可点击，用户只能通过手动滑动幻灯片来切换。

5.3 导航参数

5.3.1 navigation（导航按钮）

navigation 参数用于设置 Swiper 的导航按钮，通过指定导航按钮的容器元素来显示“上一页”和“下一页”按钮。例如：

var mySwiper = new Swiper('.swiper-container', {
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

在 HTML 中，需要有对应的导航按钮容器元素：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- 幻灯片内容 -->
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

5.3.2 navigation.nextEl（下一页按钮）

navigation.nextEl 参数用于指定“下一页”按钮的容器元素，用户点击该按钮时，Swiper 会切换到下一张幻灯片。

5.3.3 navigation.prevEl（上一页按钮）

navigation.prevEl 参数用于指定“上一页”按钮的容器元素，用户点击该按钮时，Swiper 会切换到上一张幻灯片。

5.4 滚动条参数

5.4.1 scrollbar（滚动条）

scrollbar 参数用于设置 Swiper 的滚动条，通过指定滚动条的容器元素来显示滚动条。例如：

var mySwiper = new Swiper('.swiper-container', {
    scrollbar: {
        el: '.swiper-scrollbar',
    },
});

在 HTML 中，需要有对应的滚动条容器元素：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- 幻灯片内容 -->
    </div>
    <div class="swiper-scrollbar"></div>
</div>

5.4.2 scrollbar.draggable（滚动条是否可拖动）

scrollbar.draggable 参数用于设置滚动条是否可拖动，取值为布尔类型：

true：滚动条可拖动，用户可以通过拖动滚动条来快速切换幻灯片，就像在浏览器中拖动滚动条浏览网页一样方便😎。

var mySwiper = new Swiper('.swiper-container', {
    scrollbar: {
        el: '.swiper-scrollbar',
        draggable: true,
    },
});

false（默认值）：滚动条不可拖动，用户只能通过手动滑动幻灯片或点击导航按钮来切换。

5.5 其他参数

5.5.1 effect（切换效果）

effect 参数用于设置 Swiper 的切换效果，有以下几种取值：

‘slide’（默认值）：普通的滑动切换效果，幻灯片像抽屉一样依次滑动切换。

var mySwiper = new Swiper('.swiper-container', {
    effect: 'slide',
});

‘fade’：淡入淡出切换效果，当前幻灯片逐渐消失，下一张幻灯片逐渐显示，给人一种柔和的过渡效果。

var mySwiper = new Swiper('.swiper-container', {
    effect: 'fade',
});

‘cube’：立方体切换效果，幻灯片像立方体的面一样进行旋转切换，具有很强的立体感。

var mySwiper = new Swiper('.swiper-container', {
    effect: 'cube',
});

‘coverflow’：覆盖流切换效果，幻灯片像卡片一样依次排列，并且有一定的倾斜和缩放效果，看起来很有层次感。

var mySwiper = new Swiper('.swiper-container', {
    effect: 'coverflow',
});

‘flip’：翻转切换效果，幻灯片像书本的页面一样进行翻转切换，非常有趣。

var mySwiper = new Swiper('.swiper-container', {
    effect: 'flip',
});

5.5.2 slidesPerView（可见幻灯片数量）

slidesPerView 参数用于设置在 Swiper 容器中可见的幻灯片数量，可以是一个整数，也可以是 ‘auto’。例如：

var mySwiper = new Swiper('.swiper-container', {
    slidesPerView: 3, // 同时显示 3 张幻灯片
});

如果设置为 ‘auto’，Swiper 会根据幻灯片的宽度自动调整可见幻灯片的数量。

5.5.3 spaceBetween（幻灯片间距）

spaceBetween 参数用于设置幻灯片之间的间距，单位是像素（px）。例如：

var mySwiper = new Swiper('.swiper-container', {
    spaceBetween: 20, // 幻灯片之间的间距为 20 像素
});

通过调整幻灯片间距，可以让幻灯片之间有适当的空白，使页面看起来更加美观和清晰。

第六章高级应用与技巧

6.1 响应式设计

6.1.1 breakpoints 参数使用

1. 什么是 breakpoints 参数

breakpoints 参数是用于实现响应式设计的关键，它允许我们根据不同的屏幕宽度来动态调整 Swiper 的配置。就好比我们有一把神奇的“尺寸钥匙”🔑，可以根据不同的屏幕“锁孔”来调整 Swiper 的表现。

2. 使用示例

var swiper = new Swiper('.swiper-container', {
    // 默认配置
    slidesPerView: 3,
    spaceBetween: 30,
    breakpoints: {
        // 当屏幕宽度小于等于 768px 时
        768: {
            slidesPerView: 2,
            spaceBetween: 20
        },
        // 当屏幕宽度小于等于 480px 时
        480: {
            slidesPerView: 1,
            spaceBetween: 10
        }
    }
});

在这个示例中，当屏幕宽度大于 768px 时，Swiper 会显示 3 个滑块，间距为 30px；当屏幕宽度在 481px 到 768px 之间时，会显示 2 个滑块，间距为 20px；当屏幕宽度小于等于 480px 时，只显示 1 个滑块，间距为 10px。

6.1.2 不同屏幕尺寸下的配置

1. 常见屏幕尺寸分类

超小屏幕（Extra Small）：通常指手机屏幕，宽度一般小于 576px 📱。
小屏幕（Small）：宽度在 576px 到 767px 之间，可能是一些小平板或竖屏的手机。
中等屏幕（Medium）：宽度在 768px 到 991px 之间，常见于平板设备。
大屏幕（Large）：宽度在 992px 到 1199px 之间，一般是笔记本电脑屏幕。
超大屏幕（Extra Large）：宽度大于等于 1200px，通常是台式电脑屏幕。

2. 针对不同尺寸的配置要点

超小屏幕：减少滑块数量，增加间距，以适应小屏幕的显示。例如，将 slidesPerView 设置为 1，增加 spaceBetween 以提高可读性。
中等屏幕：可以适当增加滑块数量，调整间距，充分利用屏幕空间。
大屏幕和超大屏幕：可以显示更多的滑块，同时根据需要调整其他配置，如 speed、autoplay 等。

6.2 事件处理

6.2.1 常见事件（slideChange、swiperInit 等）

1. slideChange 事件

触发时机：当滑块切换完成时触发。就像一场精彩的演出，每换一个场景就会触发这个事件👏。
使用示例

var swiper = new Swiper('.swiper-container', {
    // 其他配置
});
swiper.on('slideChange', function () {
    console.log('滑块已切换到第 ' + (this.activeIndex + 1) + ' 个滑块');
});

2. swiperInit 事件

触发时机：当 Swiper 初始化完成时触发。可以把它想象成一场演出的开场准备工作完成，正式开始演出啦🎬。
使用示例

var swiper = new Swiper('.swiper-container', {
    // 其他配置
});
swiper.on('swiperInit', function () {
    console.log('Swiper 初始化完成');
});

6.2.2 事件绑定与处理函数编写

1. 事件绑定方式

直接绑定：使用 swiper.on() 方法，如上面的示例所示。
链式绑定：可以在创建 Swiper 实例时直接链式绑定事件。

var swiper = new Swiper('.swiper-container', {
    // 其他配置
}).on('slideChange', function () {
    console.log('滑块切换啦');
});

2. 处理函数编写要点

参数传递：处理函数可以接收一些参数，如 slideChange 事件的处理函数可以通过 this 关键字访问 Swiper 实例的属性和方法。
逻辑处理：在处理函数中可以编写各种逻辑，如更新页面元素、发送请求等。

6.3 自定义样式

6.3.1 自定义分页器样式

1. 分页器的默认样式

默认情况下，Swiper 的分页器是一些小圆点。但我们可以通过 CSS 来改变它的外观，让它更加独特。

2. 自定义样式示例

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- 滑块内容 -->
    </div>
    <div class="swiper-pagination"></div>
</div>

.swiper-pagination-bullet {
    width: 20px;
    height: 5px;
    border-radius: 0;
    background-color: #ff0000;
}
.swiper-pagination-bullet-active {
    background-color: #00ff00;
}

在这个示例中，我们将分页器的小圆点变成了长方形，并且改变了激活和未激活状态的颜色。

6.3.2 自定义导航按钮样式

1. 导航按钮的默认样式

默认的导航按钮是简单的箭头图标。我们可以通过 CSS 来改变它们的外观，让它们更符合页面的整体风格。

2. 自定义样式示例

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- 滑块内容 -->
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

.swiper-button-prev,
.swiper-button-next {
    width: 50px;
    height: 50px;
    background-color: #0000ff;
    border-radius: 50%;
}
.swiper-button-prev::after,
.swiper-button-next::after {
    color: #ffffff;
    font-size: 20px;
}

在这个示例中，我们将导航按钮变成了圆形，并且改变了背景颜色和箭头的颜色。

6.4 性能优化

6.4.1 懒加载图片

1. 什么是懒加载

懒加载是一种优化技术，它只在图片即将进入可视区域时才加载图片，而不是一次性加载所有图片。这样可以减少初始加载时间，提高页面性能🚀。

2. 使用示例

var swiper = new Swiper('.swiper-container', {
    lazy: {
        loadPrevNext: true
    }
});

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img data-src="image1.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
        <!-- 其他滑块 -->
    </div>
</div>

在这个示例中，我们通过设置 lazy 选项来启用懒加载，使用 data-src 属性来指定图片的真实地址，swiper-lazy 类来标记需要懒加载的图片。

6.4.2 按需加载模块

1. 为什么要按需加载

当我们的项目中使用了很多 Swiper 的模块时，如果一次性加载所有模块，会增加初始加载时间。按需加载可以根据实际需要只加载必要的模块，提高性能。

2. 使用示例

import Swiper from 'swiper';
import { Navigation, Pagination } from 'swiper/modules';

var swiper = new Swiper('.swiper-container', {
    modules: [Navigation, Pagination],
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    pagination: {
        el: '.swiper-pagination'
    }
});

在这个示例中，我们只导入了 Navigation 和 Pagination 模块，而不是一次性导入所有模块，从而减少了不必要的加载。

第七章示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Swiper 示例</title>

    <!-- Swiper 样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#FF7D00',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <!-- 自定义样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .custom-swiper-pagination {
                @apply flex justify-center space-x-2 mt-6;
            }
            .custom-swiper-pagination-bullet {
                @apply w-3 h-3 rounded-full bg-gray-300 transition-all duration-300 cursor-pointer;
            }
            .custom-swiper-pagination-bullet-active {
                @apply w-8 bg-primary;
            }
            .swiper-button {
                @apply absolute top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-white/80 shadow-md text-primary transition-all duration-300 hover:bg-primary hover:text-white z-10;
            }
            .swiper-button-prev {
                @apply left-4;
            }
            .swiper-button-next {
                @apply right-4;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter">

<div class="container mx-auto px-4 py-8">
    <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-8 text-center">Swiper 轮播图示例</h1>

    <!-- Swiper 容器 -->
    <div class="bg-white rounded-xl shadow-lg p-4 mb-8 max-w-4xl mx-auto overflow-hidden">
        <div class="swiper-container relative">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <!-- 幻灯片内容 -->
                    <div class="swiper-slide bg-gradient-to-r from-primary/10 to-primary/20 rounded-lg p-6 flex flex-col items-center justify-center h-[300px] md:h-[400px]">
                        <div class="text-center max-w-md">
                            <div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mb-6 mx-auto">
                                <i class="fa fa-lightbulb-o text-3xl text-primary"></i>
                            </div>
                            <h3 class="text-2xl font-bold text-primary mb-4">创意无限</h3>
                            <p class="text-gray-600 text-lg">我们提供创新的解决方案，帮助您实现业务增长和突破</p>
                        </div>
                    </div>

                    <div class="swiper-slide bg-gradient-to-r from-secondary/10 to-secondary/20 rounded-lg p-6 flex flex-col items-center justify-center h-[300px] md:h-[400px]">
                        <div class="text-center max-w-md">
                            <div class="w-16 h-16 bg-secondary/20 rounded-full flex items-center justify-center mb-6 mx-auto">
                                <i class="fa fa-cogs text-3xl text-secondary"></i>
                            </div>
                            <h3 class="text-2xl font-bold text-secondary mb-4">专业技术</h3>
                            <p class="text-gray-600 text-lg">我们的团队拥有丰富的经验和专业知识，为您提供可靠的技术支持</p>
                        </div>
                    </div>

                    <div class="swiper-slide bg-gradient-to-r from-accent/10 to-accent/20 rounded-lg p-6 flex flex-col items-center justify-center h-[300px] md:h-[400px]">
                        <div class="text-center max-w-md">
                            <div class="w-16 h-16 bg-accent/20 rounded-full flex items-center justify-center mb-6 mx-auto">
                                <i class="fa fa-line-chart text-3xl text-accent"></i>
                            </div>
                            <h3 class="text-2xl font-bold text-accent mb-4">数据分析</h3>
                            <p class="text-gray-600 text-lg">通过深入的数据分析，为您提供有价值的见解和决策支持</p>
                        </div>
                    </div>

                    <div class="swiper-slide bg-gradient-to-r from-dark/10 to-dark/20 rounded-lg p-6 flex flex-col items-center justify-center h-[300px] md:h-[400px]">
                        <div class="text-center max-w-md">
                            <div class="w-16 h-16 bg-dark/20 rounded-full flex items-center justify-center mb-6 mx-auto">
                                <i class="fa fa-users text-3xl text-dark"></i>
                            </div>
                            <h3 class="text-2xl font-bold text-dark mb-4">团队协作</h3>
                            <p class="text-gray-600 text-lg">高效的团队协作是项目成功的关键，我们注重沟通和合作</p>
                        </div>
                    </div>

                    <div class="swiper-slide bg-gradient-to-r from-primary/10 to-secondary/20 rounded-lg p-6 flex flex-col items-center justify-center h-[300px] md:h-[400px]">
                        <div class="text-center max-w-md">
                            <div class="w-16 h-16 bg-gradient-to-r from-primary/20 to-secondary/20 rounded-full flex items-center justify-center mb-6 mx-auto">
                                <i class="fa fa-rocket text-3xl bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary"></i>
                            </div>
                            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary mb-4">未来展望</h3>
                            <p class="text-gray-600 text-lg">我们不断探索新技术和新方法，为您创造更美好的未来</p>
                        </div>
                    </div>
                </div>

                <!-- 自定义按钮 -->
                <div class="swiper-button swiper-button-prev">
                    <i class="fa fa-angle-left"></i>
                </div>
                <div class="swiper-button swiper-button-next">
                    <i class="fa fa-angle-right"></i>
                </div>

                <!-- 自定义分页 -->
                <div class="custom-swiper-pagination" id="customPagination"></div>
            </div>
        </div>
    </div>

    <!-- Swiper 功能说明 -->
    <div class="bg-white rounded-xl shadow-lg p-6 max-w-4xl mx-auto">
        <h2 class="text-xl font-bold text-gray-800 mb-4">Swiper 轮播图功能说明</h2>
        <p class="text-gray-600 mb-4">本示例展示了如何使用 Swiper 创建一个功能丰富的轮播图，包括：</p>
        <ul class="list-disc list-inside text-gray-600 space-y-2 mb-6">
            <li>多个幻灯片内容展示</li>
            <li>自动滚动功能</li>
            <li>自定义指示器（带有动画效果）</li>
            <li>自定义左右导航按钮</li>
            <li>响应式设计，适配不同屏幕尺寸</li>
            <li>精美的渐变背景和图标</li>
        </ul>
        <p class="text-gray-600">你可以通过点击左右按钮或下方指示器来控制轮播图，也可以直接滑动切换幻灯片。</p>
    </div>
</div>

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const paginationContainer = document.getElementById('customPagination');
        const swiperWrapper = document.querySelector('.swiper-wrapper');
        const slides = swiperWrapper.querySelectorAll('.swiper-slide');

        // 创建分页按钮
        slides.forEach((_, index) => {
            const bullet = document.createElement('div');
            bullet.className = 'custom-swiper-pagination-bullet';
            bullet.setAttribute('data-index', index);
            paginationContainer.appendChild(bullet);
        });

        const customBullets = document.querySelectorAll('.custom-swiper-pagination-bullet');

        // 初始化 Swiper
        const swiper = new Swiper('.mySwiper', {
            slidesPerView: 1,
            spaceBetween: 30,
            loop: true,
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            speed: 800,
            effect: 'slide',
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            breakpoints: {
                768: { slidesPerView: 2 },
                1024: { slidesPerView: 1 },
            },
            on: {
                slideChange: function () {
                    const activeIndex = this.realIndex;
                    customBullets.forEach((bullet, i) => {
                        bullet.classList.toggle('custom-swiper-pagination-bullet-active', i === activeIndex);
                    });
                }
            }
        });

        // 添加点击事件到自定义分页按钮
        customBullets.forEach((bullet, index) => {
            bullet.addEventListener('click', () => {
                swiper.slideToLoop(index); // 使用 slideToLoop 考虑 loop 场景
            });
        });

        // 初始高亮第一个分页
        if (customBullets.length > 0) {
            customBullets[0].classList.add('custom-swiper-pagination-bullet-active');
        }
    });
</script>
</body>
</html>