swiper/vue

// 引入 Swiper 组件和样式
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

// 如果需要使用某些特定的模块，例如分页、导航等，可以按需引入
import { Pagination, Navigation } from 'swiper/modules';

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    // 注册需要使用的 Swiper 模块
    const modules = [Pagination, Navigation];

    return {
      modules,
    };
  },
};

HTML 部分

<template>
  <swiper :modules="modules" :slides-per-view="3" :space-between="50" navigation pagination>
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
  </swiper>
</template>

解释说明

1. 引入组件和样式：首先我们需要从 swiper/vue 中引入 Swiper 和 SwiperSlide 组件，并引入 Swiper 的默认样式。
2. 按需引入模块：如果需要使用分页或导航等功能，可以通过 swiper/modules 按需引入对应的模块。
3. 注册模块：在 setup 函数中注册这些模块，以便在 Swiper 组件中使用。
4. 配置 Swiper：在模板中使用 <swiper> 标签，并通过属性传递配置项，如 slides-per-view（每页显示的幻灯片数量）、space-between（幻灯片之间的间距）等。
5. 添加幻灯片：使用 <swiper-slide> 标签来定义每个幻灯片的内容。

这样你就可以创建一个带有分页和导航功能的 Swiper 轮播图了。