使用 Vue 和 Swiper 实现中间大两边小的轮播图效果

以下是使用 Vue 和 Swiper 实现中间大两边小的轮播图效果的代码：

1. 安装 Swiper：

npm install swiper --save

2. 在 Vue 组件中引入 Swiper：

import Swiper from 'swiper';
import 'swiper/css/swiper.css';

3. 在 Vue 组件中使用 Swiper：

<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide slide-big"></div>
<div class="swiper-slide slide-small"></div>
<div class="swiper-slide slide-small"></div>
<div class="swiper-slide slide-small"></div>
<div class="swiper-slide slide-big"></div>
</div>
</div>
</template>

<script>
export default {
mounted() {
new Swiper('.swiper-container', {
slidesPerView: 'auto',
centeredSlides: true,
loop: true,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
},
};
</script>

<style>
.slide-big {
width: 400px;
height: 300px;
background-color: #ccc;
}

.slide-small {
width: 200px;
height: 150px;
background-color: #ddd;
}
</style>

在上面的代码中，我们定义了一个 Swiper 容器，其中包含了 5 个 Swiper Slide，其中第 1 和第 5 个是大的 Slide，中间 3 个是小的 Slide。我们使用了 Swiper 的 slidesPerView 和 centeredSlides 属性来实现中间大两边小的效果，使用 loop 属性来实现循环播放，使用 spaceBetween 属性来设置 Slide 之间的间距，使用 pagination 属性来添加分页器。

最后，我们还定义了两个样式类 slide-big 和 slide-small，用于设置大的 Slide 和小的 Slide 的样式。