使用swiper实现多个slide无缝轮播

使用swiper实现多个slide无缝轮播

swiper-wrapper不能设置justify-content:center(不然轮播图会有空白)

HTML

	 <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide swiper-item"
            v-for="(item, index) in lunboList"
            :key="index"
          >
            <img :src="item.img" alt />
            <p>{{ item.desc }}</p>
          </div>
        </div>
      </div>

CSS

.swiper-container {
      margin: 0 auto;
      overflow: hidden;
      position: relative;
      width: 1310px;
      .swiper-wrapper {
        width: 100%;
        height: 100%;
        position: relative;
        transition-duration: 2000ms;
        display: flex; //这里一定不能有justify-content:center(不然轮播图会有空白)
        .swiper-item {
          width: 396px;
          img {
            width: 100%;
            height: 300px;
          }
          &:not(:last-child) {
            margin-right: 60px;
          }
        }
      }
    }

引入swiper

npm install swiper
import Swiper from "swiper";

使用Swiper

    lunboFun() {
      //let item = document.getElementsByClassName("swiper-wrapper")[0];
      //let moveLength = 0;
      // let timer = setInterval(() => {
      //   if (moveLength <= 2280) {
      //     //是否移动到尽头
      //    item.style = "transform:translateX(-" + moveLength + "px);";
      //     moveLength += 456;
      //   } else if (moveLength > 2280) {
      //     //是否移动到尽头
      //     moveLength = 456;
      //    item.style = "transform:translateX(-" + moveLength + "px);";
      //   }
      // }, 3000);
      var swiper = new Swiper(".swiper-container", {
        slidesPerView: "auto",//设置slider容器能够同时显示的slides数量
        loop: true,//循环
        loopedSlides: 5,//设置所要用到的loop个数(一般设置大于可视slide个数2个即可)。
        speed: 2000, //匀速时间
        centeredSlides: true,//设定为true时，active slide会居中，而不是默认状态下的居左。
        loopAdditionalSlides: 3,//在slides前后复制若干个slide,，前后复制的个数不会大于原总个数。
        autoplay: {
          delay: 2000,//在每一屏延迟时间
        },
      });
    },