vue轮播插件vue-awesome-swiper

 

一、安装依赖

使用vue封装的vue-awesome-swiper轮播图插件，不是原生的swiper插件

安装，npm install vue-awesome-swiper@4.1.1  --save

npm install swiper@5  --save

在main.js全局注册

import VueAwesomeSwiper from "vue-awesome-swiper";

import "swiper/css/swiper.min.css";

Vue.use(VueAwesomeSwiper);

 

界面代码

<template>
    <div>
          <swiper :options="swiperOption">
            <swiper-slide></swiper-slide>
            <swiper-slide></swiper-slide>
            <!--以下看需要添加-->
            <div class="swiper-scrollbar"></div> //滚动条
            <div class="swiper-button-next"></div> //下一项
            <div class="swiper-button-prev"></div> //上一项
            <div class="swiper-pagination"></div> //标页码
          </swiper>
   </div>
</template>     

 应用界面js代码

分页器官网配置：https://www.swiper.com.cn/api/pagination/299.html

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: "index",
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  data () {
    return {
      swiperOption: {
        // 分页器配置
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        // 设定初始化时slide的索引
        initialSlide: 0,
        //Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
        direction: 'horizontal',
        // 自动切换图配置
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        // 箭头配置
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        // 环状轮播
        loop: true,
        slidesPerView: 'auto',
        loopedSlides: 3,
        loopAdditionalSlides: 0,
        // 一个屏幕展示的数量
        slidesPerView: 1,
        // 间距
        // spaceBetween: 26,
        // 修改swiper自己或子元素时，自动初始化swiper
        observer: true,
        // 修改swiper的父元素时，自动初始化swiper
        observeParents: true
      }
    }
  }
}
</script>