swiper轮播效果

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="../../assets/image/1.png" alt=""></div>
      <div class="swiper-slide"><img src="../../assets/image/2.png" alt=""></div>
      <div class="swiper-slide"><img src="../../assets/image/4.png" alt=""></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

<!--    &lt;!&ndash; 如果需要导航按钮 &ndash;&gt;-->
<!--    <div class="swiper-button-prev"></div>-->
<!--    <div class="swiper-button-next"></div>-->

<!--    &lt;!&ndash; 如果需要滚动条 &ndash;&gt;-->
<!--    <div class="swiper-scrollbar"></div>-->
  </div>
</template>

<script>
  import Swiper from 'swiper';
  // 导入css样式
  import 'swiper/css/swiper.css'
  export default {
    name: 'Swiper',
    mounted() {
      new Swiper ('.swiper-container', {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: { // 自动切换
          // 解决用户滑动或点击后,不轮播的问题
          disableOnInteraction: false,
          delay: 3000,
        },

        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        /*navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
          el: '.swiper-scrollbar',
        },*/
      })
    }
  }
</script>