swiper.vue

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="slider in sliders">
        <a :href="slider.url">
          <img :src="slider.sliderimg"/>
        </a>
      </div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination" v-if="showPagination"></div>
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev" v-if="showNavbutton"></div>
    <div class="swiper-button-next" v-if="showNavbutton"></div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import Swiper from 'swiper/dist/js/swiper.min'
  import 'swiper/dist/css/swiper.min.css'
  export default {
    name: 'swiper',
    beforeMount(){
     console.log(1)
    },
    created() {

    },
    mounted(){
      const swiper =new Swiper('.swiper-container', {
        spaceBetween: 0,
        centeredSlides: true,
        loop: true,
        autoplay: {
          delay: this.delayTime,
          disableOnInteraction: false,
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
    },
    props: {
      sliders: {
        type: Array,
      },
      showPagination: {
        type: Boolean,
        default: false
      },
      showNavbutton: {
        type: Boolean,
        default: false
      },
      delayTime: {
        type: Number,
        default: 3000
      }
    }
  }
</script>

<style lang="less">
  @import "../assets/less/dmhz";
  .swiper-container img{
    width: 100%;
  }
  .swiper-pagination-bullet {
    width: 30px;
    height: 8px;
    display: inline-block;
    border-radius: 0;
    background-color: #ffffff;
    opacity: 0.8;
  }

  .swiper-pagination-bullet-active {
    opacity: 1;
    background: @header-background-color;
  }

</style>

切換后輪播圖不動(dòng)了，滑動(dòng)下才會(huì)再動(dòng)起來。