vue3 使用swiper

在Vue3中使用Swiper可以按照以下步骤进行：

1. 首先，安装Swiper的Vue版本：

npm install swiper vue-awesome-swiper

2. 在你的Vue组件中引入Swiper组件：

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  // ...
}

3. 在模板中使用Swiper组件：

<template>
  <div>
    <swiper>
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <!-- 其他Slide -->
    </swiper>
  </div>
</template>

4. 可以根据需要在组件中设置Swiper的参数：

<template>
  <div>
    <swiper :options="swiperOptions">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <!-- 其他Slide -->
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOptions: {
        // Swiper的配置选项
        // 例如：autoplay: true
      }
    }
  }
}
</script>