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

在Vue3中实现Swiper轮播图显示三张图片并采用完整两边显示的效果，你可以按照以下步骤进行：

1. 首先，你需要安装`swiper-vue3`库，它是一个官方维护的Vue3版本的Swiper组件。你可以通过npm或yarn安装：

   npm install swiper-vue3
   # 或者
   yarn add swiper-vue3

2. 然后，在你的项目里导入Swiper组件：

   import { Swiper, SwiperSlide } from 'swiper-vue3';

3. 在组件模板中创建Swiper实例，并设置初始配置。假设你有三张图片数据：

   <template>
     <div class="swiper-container">
       <Swiper :options="{ loop: true, pagination: { clickable: true }, spaceBetween: 30 }">
         <SwiperSlide v-for="(image, index) in images" :key="index">
           <img :src="image.src" alt="" />
         </SwiperSlide>
       </Swiper>
     </div>
   </template>

这里的`loop`属性使得轮播图可以循环播放，`clickable`属性让页码点可以点击切换，`.spaceBetween`设置了滑块之间的间距。

4. 在data()函数中提供图片数组：

   export default {
     data() {
       return {
         images: [
           { src: 'image1.jpg' },
           { src: 'image2.jpg' },
           { src: 'image3.jpg' },
         ],
       };
     },
   };

5. 如果需要控制轮播，可以在methods中添加事件监听器：

   methods: {
     onSliderChange(index) {
       console.log('当前索引:', index);
     },
   },

和绑定事件到Swiper实例上：

   <Swiper @change="onSliderChange" />

完成以上步骤后，你应该能看到一个显示三张图片、支持完整两边循环滚动的Swiper轮播图。