bootstrap 同一页面多个图片轮播

Posted 2023-05-03

只要区分红框里的内容就可以了

参考技术A

只要给不同的轮播设定不同的ID就可以。

bootstrap控制轮播的是class，初始化轮播用JS代码，只要设置不同的ID，写上不同的JS，就可以了。

初始化轮播代码：

$('.carousel').carousel()

把这里的class换成ID选择，然后为每个轮播写一行JS代码就可以了

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

参考技术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;



```

方法二：