vue3 如何实现 swiper轮播图在vue中实现显示3张图片,一个完整的两边显示一半可以滑动

在 Vue3 中，你可以使用 Swiper 组件库来创建轮播图功能。Swiper 提供了丰富的轮播组件和选项，适合用于展示图片列表。以下是使用 Swiper 实现这个需求的一个基本步骤：

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

   npm install swiper@swiper/vue3 || yarn add swiper@swiper/vue3

2. **引入组件**:
在你的 .vue 文件中，引入 Swiper 组件：

   <script setup>
     import { Swiper, SwiperSlide } from 'swiper/swiper-bundle.vue';
   </script>

3. **配置 Swiper**:
创建一个 `Swiper` 组件，并设置需要显示三张图片及其布局：

   <div class="swiper-container">
     <Swiper :options="{ loop: true, centeredSlides: true, slidesPerView: 'auto', spaceBetween: 0 }">
       <SwiperSlide v-for="(image, index) in images" :key="index">
         <img :src="image.src" alt="Image {{ index + 1 }}">
       </SwiperSlide>
     </Swiper>
   </div>

假设 `images` 变量是一个数组，包含三张图片的 URL。

4. **数据绑定**:
在你的 `.ts` 或 `.js` 文件里，初始化 `images` 数组：

   const images = [
     { src: 'path/to/image1.jpg' },
     { src: 'path/to/image2.jpg' },
     { src: 'path/to/image3.jpg' }
   ];

5. **样式调整**:
如果你想让图片显示为一半左右，可能还需要自定义 CSS 样式，例如设置容器宽度为图片宽度的两倍等。

完成以上步骤后，你应该能看到一个可以在两端显示半张图片并且可以滑动的轮播效果。