Vue之轮播图组件vue-awesome-swiper安装与使用

最新推荐文章于 2025-06-25 11:11:50 发布

我能在河边钓一整天的鱼

最新推荐文章于 2025-06-25 11:11:50 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： [Vue] 文章标签： vue 轮播图

本文链接：https://blog.youkuaiyun.com/Delicious_Life/article/details/103553137

本文介绍了如何在Vue项目中安装和使用vue-awesome-swiper组件来创建自定义轮播图，包括全局引入组件、删除不需要的箭头和滚动条、添加并设置轮播图片、显示页码、动态绑定图片以及禁用自动播放功能的详细步骤。通过这些步骤，你可以创建一个简洁、功能齐全的轮播图组件。

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

我们需要的轮播图没有左右箭头，也没有滚动条。

github地址

https://github.com/surmon-china/vue-awesome-swiper

安装npm命令

这里推荐大家安装2.6.7版本比较稳定

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

全局引入到项目中

1.找到项目的main.js文件，补全如下代码

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

如何使用轮播图组件

1.在components文件夹下新建一个Swiper.vue文件

2.写入如下代码

<template>
  <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <swiper-slide>I'm Slide 5</swiper-slide>
    <swiper-slide>I'm Slide 6</swiper-slide>
    <swiper-slide>I'm Slide 7</swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar"