vue swiper动态显示带指示点可手滑切换轮播图PC端手机端适用

置顶

D_evin_

于 2022-02-11 13:24:48 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：练习文章标签： vue.js 前端 javascript swiper 轮播图

本文链接：https://blog.csdn.net/D_evin_/article/details/122878368

本文介绍了如何使用 Vue.js 结合 Swiper 框架，在PC和手机端创建动态显示且带有指示点的手滑切换轮播图。通过下载依赖、在 main.js 中引入以及在具体页面中应用，详细讲解了实现步骤。

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

1、下载依赖（不带版本号会缺少文件）

npm install [email protected] --save

2、main.js 引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

3、在单页面中使用

<template>
  <div>
    <swiper ref="mySwiper" class="swiperbox" :options="swiperOption">
      <swiper-slide class="swiper-slide" v-for="image in data" :key="image.id">
        <img style="width: 100vw" :src="image.image" />
      </swiper-slide>
      <div class="swiper-pagina