vue3使用Swiper实现简单轮播图

原创

于 2022-06-23 09:57:31 发布

· 2.4k 阅读

版权

文章标签：

本文介绍如何在Vue3项目中利用Swiper 5.4.5实现一个基本的轮播图功能，包括安装步骤、组件引入及最终实现的无左右切换和无底部小圆点的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装Swiper

npm i swiper@5.4.5

2、引入组件库

	import Swiper from 'swiper' // 引入库
	import 'swiper/css/swiper.css' // 引入样式文件，注意5和6版本的样式文件不一致

3、完整代码

<template>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class=