vue中轮播组件，实现默认显示3张图片，中间显示全部两边显示部分

Posted 2023-03-09

参考技术A 实现的效果图片展示如下：

找了，YDui,Museui发现都不可以，因为他们是display:none,于是安装了swiper

关于在同一个页面使用多个swiper,多个轮播出现冲突的问题?--

首先可以给swiper-container这个层级的div加多个专属类名或者id,然后在分页器或者左右切换的按钮也是如此

npm install swiper

import 'swiper/dist/css/swiper.min.css'

import Swiper from "swiper"

5.写在mounted里面，created节点还没生成

loop:是否无缝滚动，环形的。

centeredSlides:active图片在中间，不是在最左边。

spaceBetween:两边间距是多少，看UI设计，这里这个参数很重要。

6.css

```

.swiper-container

  margin-top: 0.2rem;

  width: 100%;

  height: 2.72rem;

  overflow: visible !important;

  position: relative;



.swiper-container .swiper-wrapper .swiper-slide

  width: 6.62rem;

  border-radius: 0.12rem;



.swiper-container .swiper-wrapper .swiper-slide img

  width: 100%;

  height: 2.72rem;

  border-radius: 0.12rem;



.swiper-container .swiper-wrapper .swiper-slide-prev

  margin-top: 0.18rem;

  height: 2.5rem !important;



.swiper-container .swiper-wrapper .swiper-slide-prev img

  height: 2.4rem !important;



.swiper-container .swiper-wrapper .swiper-slide-next

  margin-top: 0.18rem;

  height: 2.5rem !important;



.swiper-container .swiper-wrapper .swiper-slide-next img

  height: 2.4rem !important;



.swiper-container .swiper-wrapper .swiper-slide-active

  width: 6.62rem;



.swiper-pagination

  bottom: 0.1rem !important;



```

方法二：