关于vue中swiper轮播图组件使用,左右按钮

1、安装依赖

npm install vue-awesome-swiper --save

2、引入awesome-swiper

支持全局引入和在组件中引入2种方式，如果项目中只有一个轮播的话推荐在组件中引入，有多个轮播则推荐在全局中引入。

（1）全局引入方式，在main.js中添加以下代码

import vueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

vue.use(vueAwesomeSwiper)

3、组件内调用轮播图

支持SPA(single page web application，单页Web应用）和SSR（Server Side Rendering，服务端渲染）2种模式，SPA通过ref属性来查找swiper实例，而SSR借助命令参数查找swiper实例，在使用方面2种模式都是一样的。

（1）SPA模式

HTML结构见下，分页器、向左向右滚动按钮、滚动条等都是可选的，如不需要注释掉即可

<!-- 轮播 -->
      <swiper :options="swiperOption"
              ref="mySwiper">
           
        <!-- slides -->
            <swiper-slide><img src="https://img.yzcdn.cn/vant/apple-1.jpg"
               alt=""
               class="lunbotu"></swiper-slide>
            <swiper-slide><img src="https://img.yzcdn.cn/vant/apple-2.jpg"
               alt=""
               class="lunbotu"></swiper-slide>
            <swiper-slide><img src="https://img.yzcdn.cn/vant/apple-3.jpg"
               alt=""
               class="lunbotu"></swiper-slide>
            <swiper-slide><img src="https://img.yzcdn.cn/vant/apple-4.jpg"
               alt=""
               class="lunbotu"></swiper-slide>
            <swiper-slide><img src="https://img.yzcdn.cn/vant/apple-1.jpg"
               alt=""
               class="lunbotu"></swiper-slide>
            <swiper-slide><img src="https://img.yzcdn.cn/vant/apple-2.jpg"
               alt=""
               class="lunbotu"></swiper-slide>
            <swiper-slide><img src="https://img.yzcdn.cn/vant/apple-3.jpg"
               alt=""
               class="lunbotu"></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>
          </swiper>

 

script中关于轮播图的设置见下

export default {
  data () {
    return {
      active: 0,
      xianshi: 1,
      swiperOption: {
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          type: 'bullets',
          clickable: true,
          dynamicBullets: false
        },
        speed: 1000,
        autoplay: {
          delay: 1000,
          disableOnInteraction: false
        },
        effect: 'slide',
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      }
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted () {
    this.swiper.slideTo(1, 1000, false)
  }

 

效果见下