vue中使用图片轮播插件swiper

1、在项目中安装插件

npm install vue-awesome-swiper --save

2.main.js中引入插件的css文件。（官方给出的路径，直接引入的node_modules中的）

import 'swiper/dist/css/swiper.css' 

2.在使用此插件的组件的<script>标签中导入swiper

import { swiper, swiperSlide } from 'vue-awesome-swiper'

4.组件中注册

components: {
    swiper,
    swiperSlide
}

5.可以在官网上查找要使用的模板代码
https://github.com/surmon-china/vue-awesome-swiper
点击如下可以查看很多效果

image.png

image.png

模板参考

每一个swiper-slide里面放一个图片。:options是为了后面在data中配置参数。

<swiper :options="swiperOption">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <swiper-slide>Slide 4</swiper-slide>
        <swiper-slide>Slide 5</swiper-slide>
        <swiper-slide>Slide 6</swiper-slide>
        <swiper-slide>Slide 7</swiper-slide>
        <swiper-slide>Slide 8</swiper-slide>
        <swiper-slide>Slide 9</swiper-slide>
        <swiper-slide>Slide 10</swiper-slide>
         //分页器小圆点
        <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>

在data中配置参数

swiperOption: {
  slidesPerView: 1,
  spaceBetween: 30,
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  }
}

想要了解更多的配置，可以查看官网API：https://www.swiper.com.cn/api/index.html