Vue开发中使用swiper5

第一步

使用npm导入swiper@5.4.5和配合使用的vue-awesome-swiper@4.1.1

 npm install swiper@5.4.5
 npm i vue-awesome-swiper@4.1.1

第二步

在main.js导入swiper.css和VueAwesomeSwiper

import VueAwesomeSwiper from 'vue-awesome-swiper/dist/vue-awesome-swiper'
import 'swiper/css/swiper.min.css'

Vue.use(VueAwesomeSwiper)

第三步

页面使用

配置项网站：swiper官网

<template>
  <div class="one">
    <swiper ref="swiper"
      style="height:100%;"
      :options="swiperOptions">
      <swiper-slide v-for="(item,index) in list" :key="index">
        <img :src="item.src" alt="">
      </swiper-slide>
    </swiper>
	<!-- 指示点 -->
    <div class="swiper-pagination"></div>
	<!-- 左右切换按钮 -->
    <div class="swiper-button-prev" @click="handlerPrev" />
    <div class="swiper-button-next" @click="handlerNext" />
  </div>
</template>

<script>
export default {
  name: 'newSwiper',
  data(){
    return {
      // 配置项
      swiperOptions: {
        effect: "cube",
        grabCursor: true,
        cubeEffect: {
          shadow: true,
          slideShadows: true,
          shadowOffset: 20,
          shadowScale: 0.94,
        },
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
      list: [
        {
          title: '牛郎',
          src: require('../assets/ditie1.png')
        },
        {
          title: '织女',
          src: require('../assets/ditie2.png')
        },
        {
          title: '二八车',
          src: require('../assets/ditie3.png')
        },
        {
          title: '公主车',
          src: require('../assets/ditie4.png')
        },
        {
          title: '鹊桥',
          src: require('../assets/ditie5.png')
        }
      ],
      translateX: '0',
      tranNum: 0,
      src: ''
    }
  },
  methods: {
    handlerPrev() {
      this.$refs.swiper.$swiper.slidePrev();
    },
    handlerNext() {
      this.$refs.swiper.$swiper.slideNext();
    },
  },
  mounted() {

  }
}
</script>

<style lang="scss">
    /*修改swiper的样式就不能使用 scoped*/
  .swiper-pagination{
    width: 750px;
    .swiper-pagination-bullet{
      background-color: #b50000;
      margin: 0 5px;
      width: 20px;height: 20px;
    }
  }
</style>

<style lang="scss" scoped>
.one{
  width: 750px;
}
</style>