1. 本地环境信息参考
node版本：
nodejs : v18.20.4 npm : 10.7.0 vue版本
"dependencies": { "vue": "^3.2.13", ... } 2. 安装swiper依赖
执行命令：
npm i swiper 安装后，查看工程中的package.json文件，新增了swiper依赖（默认最新版）：
"dependencies": { "swiper": "^11.1.14", "vue": "^3.2.13", ... } 3. 轮播图默认效果
模拟轮播图需求说明：
1、多张图片，可自动播放
2、有指示器
3、有左右导航按钮（向前、向后）
图片导入工程
代码实现 & 释义：
导入swiper组件：Swiper容器；SwiperSlide子项容器
import {Swiper, SwiperSlide} from 'swiper/vue'; 导入module：因为swiper将不同功能进行组件化拆分，使其更灵活化，我们使用具体的功能，只需导入相应的module即可。
导航（左右按钮功能）、Pagination（分页指示器功能）、A11y （辅助功能模块，旨在提高网站或应用的可访问性）、Autoplay（自动播放功能）
import {Navigation, Pagination, A11y, Autoplay} from 'swiper/modules'; const modules = [Navigation, Pagination, A11y, Autoplay] 导入相关样式，按功能导入相应的css：
import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; import 'swiper/css/autoplay'; template中使用Swiper、SwiperSlide组件，并配置module、属性、事件等
<swiper class="swiper-container" :slides-per-view="1" :space-between="0" @swiper="onSwiper" @slideChange="onSlideChange" :modules="modules" :pagination="{ clickable: true }" :autoplay="{ delay: 2000, disableOnInteraction: false, }" navigation :loop="true" > <swiper-slide> <img class="item" src="@/assets/banner/0.jpg"/> </swiper-slide> <swiper-slide> <img class="item" src="@/assets/banner/1.jpg"/> </swiper-slide> <swiper-slide> <img class="item" src="@/assets/banner/2.jpg"/> </swiper-slide> <swiper-slide> <img class="item" src="@/assets/banner/3.jpg"/> </swiper-slide> </swiper> :slides-per-view: 这个属性设置了每个滑块（slide）的可见数量。在这里，设置为 1 表示每次只显示一个滑块。 :space-between：这个属性设置了滑块之间的间距。在这里，设置为 0 表示滑块之间没有间距。 @swiper="onSwiper"：这个属性是一个事件监听器，当 Swiper 初始化完成时会触发名为 "onSwiper" 的方法。 @slideChange="onSlideChange"：这个属性是另一个事件监听器，当滑块切换时会触发名为 "onSlideChange" 的方法。 :modules：这个属性指定了 Swiper 实例所使用的模块。通过这个属性，可以配置 Swiper 实例使用的各种功能模块【此处配置了导航、指示器、自动播放等】。 :pagination：这个属性配置了 Swiper 的分页指示器，设置为可点击，用户可以通过点击分页器来切换到不同的滑块。 :autoplay：这个属性配置了自动播放功能，设置了播放延迟为 2000 毫秒（2秒），并且当用户交互时不停止自动播放。 navigation：这个属性开启了 Swiper 的导航按钮，通常会显示左右箭头或其他导航元素，用于用户手动导航滑块。 :loop：这个属性设置了 Swiper 是否循环播放滑块内容，即当滑动到最后一个滑块时是否自动切换到第一个滑块。设置为 true 表示开启循环播放。 定义swiper实例，用于后续swiper操作，例如：跳转下一页、暂停自动播放等等
const swiperInstance = ref<typeof Swiper | null>(null); 事件方法定义
//初始化swiper后，为swiperInstance赋值 const onSwiper = (swiper: typeof Swiper) => { swiperInstance.value = swiper; }; //监听slide滑块更改事件回调 const onSlideChange = () => { console.log('slide change'); }; 实现效果
完整代码参考
<template> <swiper class="swiper-container" :slides-per-view="1" :space-between="0" @swiper="onSwiper" @slideChange="onSlideChange" :modules="modules" :pagination="{ clickable: true }" :autoplay="{ delay: 2000, disableOnInteraction: false, }" navigation :loop="true" > <swiper-slide> <img class="item" src="@/assets/banner/0.jpg"/> </swiper-slide> <swiper-slide> <img class="item" src="@/assets/banner/1.jpg"/> </swiper-slide> <swiper-slide> <img class="item" src="@/assets/banner/2.jpg"/> </swiper-slide> <swiper-slide> <img class="item" src="@/assets/banner/3.jpg"/> </swiper-slide> </swiper> </template> <script lang="ts" setup> import {ref} from 'vue'; import {Swiper, SwiperSlide} from 'swiper/vue'; import {Navigation, Pagination, A11y, Autoplay} from 'swiper/modules'; import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; import 'swiper/css/autoplay'; const modules = [Navigation, Pagination, A11y, Autoplay] const swiperInstance = ref<typeof Swiper | null>(null); const onSwiper = (swiper: typeof Swiper) => { swiperInstance.value = swiper; }; const onSlideChange = () => { console.log('slide change'); }; </script> <style scoped> .swiper-container { background-color: white; } .item { width: 100%; height: auto; } </style> 4. 优化自动播放效果
如果用户鼠标移入swiper，应该让swiper暂停滑动，方便用户查看当前滑块的具体信息；如果鼠标滑出swiper，应该继续自动滑动。
实现：
swiper ui组件监听鼠标移入、移出事件：
@mouseenter="pauseSwiper" @mouseleave="resumeSwiper" script代码中，实现对应的方法：
const pauseSwiper = () => { if (swiperInstance.value) { swiperInstance.value.autoplay.stop(); } }; const resumeSwiper = () => { if (swiperInstance.value) { swiperInstance.value.autoplay.start(); } }; 5. 自定义左右导航按钮
多数情况下，需要参考项目的UI设计稿，调整左右导航按钮效果/样式。
此处，我们模拟修改下，使用两张图片作为左右导航按钮。
script中，先实现左右切换滑块的功能：
const goPrev = ()=> { if (swiperInstance.value) { swiperInstance.value.slidePrev(); } }; const goNext = () => { if (swiperInstance.value) { swiperInstance.value.slideNext(); } }; swiper ui组件上不再配置默认的navigation属性。
导入按钮图片：
布局中新增左右按钮，并设置其样式：
<div class="custom-navigation"> <img src="@/assets/img_pre.png" class="custom-swiper-button-prev" @click="goPrev"> <img src="@/assets/img_next.png" class="custom-swiper-button-next" @click="goNext"> </div> .custom-swiper-button-prev, .custom-swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; color: #FFFFFF; font-size: 20px; width: 50px; height: 50px; } .custom-swiper-button-next { right: 20px; } .custom-swiper-button-prev { left: 20px; } 自定义导航按钮效果：
完整代码
<template> <swiper class="swiper-container" :slides-per-view="1" :space-between="0" @swiper="onSwiper" @slideChange="onSlideChange" :modules="modules" :pagination="{ clickable: true }" :autoplay="{ delay: 2000, disableOnInteraction: false, }" :loop="true" @mouseenter="pauseSwiper" @mouseleave="resumeSwiper" > <swiper-slide> <img class="item" src="@/assets/banner/0.jpg"/> </swiper-slide> <swiper-slide> <img class="item" src="@/assets/banner/1.jpg"/> </swiper-slide> <swiper-slide> <img class="item" src="@/assets/banner/2.jpg"/> </swiper-slide> <swiper-slide> <img class="item" src="@/assets/banner/3.jpg"/> </swiper-slide> </swiper> <div class="custom-navigation"> <img src="@/assets/img_pre.png" class="custom-swiper-button-prev" @click="goPrev"> <img src="@/assets/img_next.png" class="custom-swiper-button-next" @click="goNext"> </div> </template> <script lang="ts" setup> import {ref} from 'vue'; import {Swiper, SwiperSlide} from 'swiper/vue'; import {Navigation, Pagination, A11y, Autoplay} from 'swiper/modules'; import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; import 'swiper/css/autoplay'; const modules = [Navigation, Pagination, A11y, Autoplay] const swiperInstance = ref<typeof Swiper | null>(null); const onSwiper = (swiper: typeof Swiper) => { swiperInstance.value = swiper; }; const onSlideChange = () => { console.log('slide change'); }; const pauseSwiper = () => { if (swiperInstance.value) { swiperInstance.value.autoplay.stop(); } }; const resumeSwiper = () => { if (swiperInstance.value) { swiperInstance.value.autoplay.start(); } }; const goPrev = ()=> { if (swiperInstance.value) { swiperInstance.value.slidePrev(); } }; const goNext = () => { if (swiperInstance.value) { swiperInstance.value.slideNext(); } }; </script> <style scoped> .swiper-container { background-color: white; } .item { width: 100%; height: auto; } .custom-swiper-button-prev, .custom-swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; color: #FFFFFF; font-size: 20px; width: 50px; height: 50px; } .custom-swiper-button-next { right: 20px; } .custom-swiper-button-prev { left: 20px; } </style> 
![洛谷 P11345 [KTSC 2023 R2] 基地简化 题解](http://www.itfaba.com/wp-content/themes/kemi/timthumb.php?src=http://www.itfaba.com/wp-content/themes/kemi/img/random/2.jpg&w=218&h=124&zc=1)
