Vue3使用swiper

第一步，下载swiper插件
注意：下载的时候可能失败，原因可能是你使用的是国外镜像，使用

cnpm install

然后在下载swiper

npm i swiper@5.4.5

第二步，引入插件，初始化

<script>
import Swiper from 'swiper';
import "swiper/css/swiper.css"
export default {
    mounted() {
      new Swiper ('.swiper-container', {
      loop: true, // 循环模式选项  
      effect:'fade',//渐变切换
      paginationClickable: true,//分页器切换
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })    
    }
  };
</script>

第三步，填写html

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
</template>

第四步，给轮播图定义宽高

<style>
.swiper-container {
    width: 600px;
    height: 300px;
}
</style>

这样就可以啦！！！