VUE中实现轮播图——Swiper 插件应用 vue-awesome-swiper【详细步骤】

最新推荐文章于 2025-04-09 15:00:27 发布

WH小可爱

最新推荐文章于 2025-04-09 15:00:27 发布

阅读量8.2k

点赞数 6

文章标签： vue js javascript

本文链接：https://blog.youkuaiyun.com/weixin_43633329/article/details/114001591

版权

本文介绍了在Vue项目中使用Swiper插件创建轮播图的详细步骤，包括安装2.6.7版本的swiper，如何在main.js中引入，以及在组件间如何引用和使用。通过优化与改进，使用v-for动态显示轮播图的图片地址。

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

VUE中实现轮播图——Swiper vue-awesome-swiper 插件应用【详细步骤】

前言

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件，是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端；能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。本文将从介绍什么是Swiper插件，以及Swiper插件的使用方法等方面进行讲述如何在VUE项目中实现轮播图。

一、Swiper是什么？

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件，是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端；能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

swiper是第一个第三方的库，可以用来实现移动端、pc端的滑动操作，十分方便
官方文档： https://www.swiper.com.cn/
在GitHub上参考安装和使用对策教程
网址：https://github.com/surmon-china/vue-awesome-swiper

二、使用步骤

1.安装

在这里插入图片描述

因为老版本会比新的更加稳定，在这里我们就安装2.6.7这个版本

npm install swiper vue-awesome-swiper@2.6.7 --save

在这里插入图片描述

2.在VUE中引入swiper

我们要在main.js 中添加这两行代码引入swiper

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

3.在VUE中使用swiper

首先看一下我们的目录结构：
在这里插入图片描述
在home这个文件夹下面有components文件夹，以及Home.vue这个文件。
显而易见，我们需要使用到组件间的引用，在Home.vue引用swiper.vue这个子组件。

在GitHub上参考教程是这样写的
在这里插入图片描述
当然如果直接这样写的话，轮播的不是图片，而是数字，所以在这里我也做了一些小调整。
其实就是在<swiper-slide></swiper-slide>加一个img标签/

直接上Swiper.vue 的代码：
html部分：

<template>
<div class="wrapper">
    <swiper :options="swiperOptions">
    <

最低0.47元/天解锁文章