vue3 使用swiper

// 安装 Swiper
// 首先确保你已经安装了 Swiper，可以通过 npm 或 yarn 安装：
// npm install swiper
// 或者
// yarn add swiper

<template>
  <div class="swiper-container">
    <swiper :modules="modules" :slides-per-view="3" :space-between="50" @swiper="onSwiper" @slideChange="onSlideChange">
      <swiper-slide v-for="(slide, index) in slides" :key="index">{{ slide }}</swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination, Navigation } from 'swiper';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const onSwiper = (swiper) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log('slide change');
    };

    return {
      onSwiper,
      onSlideChange,
      modules: [Pagination, Navigation],
      slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'],
    };
  },
};
</script>

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

解释说明：

1. 安装 Swiper：首先需要通过 npm 或 yarn 安装 Swiper。
2. 模板部分 (<template>)：
   • 使用 swiper 组件并传递一些配置属性，如 modules、slides-per-view 和 space-between。
   • swiper-slide 组件用于定义每个幻灯片的内容。
3. 脚本部分 (<script>)：
   • 导入 Swiper 和 SwiperSlide 组件以及所需的模块（如分页和导航）。
   • 导入 Swiper 的样式文件。
   • 在 setup 函数中定义回调函数 onSwiper 和 onSlideChange，用于处理 Swiper 实例化和幻灯片切换事件。
   • 定义 modules 数组，包含需要使用的 Swiper 模块。
   • 定义 slides 数组，包含幻灯片内容。
4. 样式部分 (<style scoped>)：
   • 设置 Swiper 容器的高度。

这样，你就可以在 Vue 3 项目中使用 Swiper 实现一个简单的轮播图。