vue使用vue-awesome-swiper实现轮播图

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

韩大璐

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

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue vue-awesome-swiper 轮播图

本文链接：https://blog.youkuaiyun.com/weixin_41257563/article/details/85685200

vue 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍如何使用vue-awesome-swiper插件在Vue项目中创建自动循环播放的轮播图，并包含分页器、左右箭头及导航条的配置。文章还讲解了如何通过样式穿透解决分页器颜色样式修改的问题。

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

下载vue-svue-awesome-swiper
为了更稳定不建议使用最新版本

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

在main.js中全局引入并使用这个插件，同时也要引入插件的css文件

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)

后边可以跟一些默认的配置参数，如果没有可以不写。

在文件中使用插件写轮播图

<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>
    <!-- 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"   slot="scrollbar"></div>
  </swiper>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
   	//参数数据
      swiperOption: {
        pagination: '.swiper-pagination',  //使用分页器
        loop: true,  //循环
        autoplay: 2000  //自动播放
      },
    }
  }
}
</script>

这样就写好了一个简单的带分页器的、可以自动循环播放的轮播图。

在vue当中，需要改变分页器的颜色样式，直接强制改变是没有用的，因为受到scope的的影响，样式只能在当前组件生效，但是swiper是全局引入的，这里就需要用到样式穿透。

<style scoped lang="stylus">
.wrapper>>>.swiper-pagination-bullet-active
    background-color: #fff !important
</style>