vue轮播图插件---vue-awesome-swiper

最新推荐文章于 2025-05-31 20:13:02 发布

zxuanxuanz

最新推荐文章于 2025-05-31 20:13:02 发布

阅读量684

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_40542728/article/details/89356211

vue 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中安装并使用Vue-Awesome-Swiper插件，包括安装指定版本、全局引入、具体使用方法、解决屏幕抖动问题、自定义前后退按钮样式及放置位置等技巧。

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

官网：https://3.swiper.com.cn/api/start/2014/1218/140.html

gihub:https://github.com/surmon-china/vue-awesome-swiper/tree/v2.6.7

（1）为了保证整个项目的稳定性，安装2.6.7版本。

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

（2）全局引入这个插件。进入项目src文件夹下的main.js入口文件，加入如下几行代码

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

（3）使用

<template>
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- 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"   slot="scrollbar"></div>
  </swiper>
</template>

（3）解决屏幕抖动问题

为了解决屏幕抖动问题，我们需要在swiper外面加一层class=“wrapper”的div包裹，然后在css样式中利用padding-bottom属性来完成图片的自适应高度占位，防止图片未加载出来到加载完成过程中屏幕出现抖动。具体css样式代码如下：

.wrapper{
     overflow:hidden;
     width:100%;
     height:0;
     padding-bottom:30.48%;
     background: #eee;
     .swiper-img{
     width:100%
    }
}

（4）具体例子

<!-- 轮播图只有分页器 -->
      <div class="block-swiper">
          <div class="wrapper">
              <swiper :options="bannerSwiperOption" id="bannerSwiper" ref="bannerSwiper">
                <!-- slides -->
                <swiper-slide v-for="item of bannerSwiperList" :key="item.id">
                    <img class="swiper-img" :src="item.image" @click="goBannerDetail(item.id)">
                </swiper-slide>
                <div class="swiper-pagination"  slot="pagination"></div>
              </swiper>
          </div>
      </div>

 <!-- 轮播图无分页器有前后退按钮-->
          <swiper :options="whyInvestSwiperOption" id="whyInvestSwiper" ref="whyInvestSwiper">
            <swiper-slide v-for="(item,index) of whyInvestSwiperList" :key="index">
                <div class="swiper">
                <img :src="item.img">
            </div>
            <div class="tip2">{{item.tip2}}</div>
            <div class="tip3">{{item.tip3}}</div>
            </swiper-slide>
            <div class="swiper-button-prev swiper-button-left" slot="button-prev"></div>
            <div class="swiper-button-next swiper-button-right" slot="button-next"></div>
          </swiper>

// 首页轮播图选项
        bannerSwiperOption: {
        pagination: ".swiper-pagination",//分页器
        paginationClickable :true,//可点击原点切换
        autoplayDisableOnInteraction : false,//用户操作swiper之后，是否禁止autoplay。默认为true：停止。如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
        loop:true,//可循环（到达最后一张继续切换从第一张开始滑动）
        autoplay: 1500,//可选选项，自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。
        },
        // why invest轮播选项
        whyInvestSwiperOption: {
        prevButton:'.swiper-button-prev',//前进按钮
        nextButton:'.swiper-button-next',//后退按钮
        autoplayDisableOnInteraction : false,
        loop:true,
        autoplay: 1500,//可选选项，自动滑动
        },

//样式
 .block-swiper{
          width:100%;
          height:4.22rem;
          border: 1px solid;
          .wrapper{
              width:100%;
              overflow :hidden;
              height :0;
              // 其中26.67%为轮播图片的宽高比
              padding-bottom :26.67%;
              background: #eee;
                  .swiper-img{
                       width:100%;
                       height:4.22rem;
                    }
          }
        }

（5）自定义前后退按钮样式

在前后退按钮处添加类如swiper-button-left和swiper-button-right，可以改变前后退按钮的大小，背景图片。

.swiper-button-left{
              background-image:url("../images/home_icon_left.png");
              background-size: 0.8rem 0.8rem;
              width: 1rem;
              height: 1rem;
            }
            .swiper-button-right{
              background-image:url("../images/home_icon_right.png");
              background-size: 0.8rem 0.8rem;
              width: 1rem;
              height: 1rem;
            }

（6）前后退按钮放在swiper之外

因为其本来就是绝对定位放在swiper内部，故在swiper和前后退按钮的父元素出设置相对定位，即可将前后退按钮放在swiper之外。

（7）注意

前后退按钮的绑定的类名是可变的，同时如果给多个轮播图绑定同一个类名的前后退按钮就会导致点击左右切换的时候其他轮播图也会同时切换。

（8）swiper3和swiper4在配置选项是有区别的，具体参看官网