vue3 swiper 显示3个

Vue3 中的 Swiper 是一个非常流行的轮播组件库，它可以帮助你在前端快速创建响应式的图片轮播、滑块等效果。Swiper 提供了丰富的配置选项以及触摸滑动、懒加载等功能，适用于各种类型的项目。

如果你想在 Vue3 项目中显示三个滑动项，你可以按照以下步骤操作：

1. 安装 Swiper：首先需要安装 Swiper 的 Vue 版本，可以使用 npm 或者 yarn 进行安装：

   npm install swiper@swiper/vue3 --save

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

   <template>
     <div>
       <Swiper :options="swiperOptions" ref="mySwiper">
         <Slide v-for="(item, index) in items" :key="index">
           <img :src="item.src" alt="Slide {{ index + 1 }}">
         </Slide>
         <!-- 添加额外的导航按钮或其他元素 -->
       </Swiper>
     </div>
   </template>

3. 初始化 Swiper：在 `data()` 函数中设置滑动选项（`swiperOptions`），包括总共有多少个滑动项 (`slidesPerView: 3`):

   export default {
     data() {
       return {
         items: [
           { src: 'image1.jpg' },
           { src: 'image2.jpg' },
           { src: 'image3.jpg' },
           // ... 更多图片
         ],
         swiperOptions: {
           slidesPerView: 3,
           // 其他配置，如 autoplay、pagination 等
         }
       };
     }
   };

4. 渲染完成后，你可以通过 `this.$refs.mySwiper` 来控制滑动组件的行为。