bug 记录 - 基于 ul 的 swiper 首图错位问题

发现问题

引入 swiper ，一页显示 5 张小图，设置相关属性后发现首图与左边框有空隙，并且显示出了图 5 的一部分

javascript 复制代码

var mySwiper = new Swiper('.swiper', {
  loop: true, // 循环模式选项
  slidesPerView: 5, // 一页几个
  slidesPerGroup: 5, // 几个一组
  spaceBetween: 10, // 空隙
  slidesOffsetBefore: 0, // 左边框偏移量
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})

swiper 容器的宽度使用了 calc 计算属性，每张图的宽度 * 图片数量 + 空隙宽度 * 空隙数量 ，正常情况下应该是不会出现空隙的

解决问题

javascript 复制代码

// 暂时移除 loop 设置，屏蔽掉循环模式的影响
var mySwiper = new Swiper('.swiper', {
  // loop: true, // 循环模式选项
  slidesPerView: 5, // 一页几个
  slidesPerGroup: 5, // 几个一组
  spaceBetween: 10, // 空隙
  slidesOffsetBefore: 0, // 左边框偏移量
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})

暂时移除 loop 属性，发现 ul 盒子实际有一个左 padding，就是这个 padding 导致了盒子内容的错位。因此即使调整宽度和 slidesOffsetBefore 也不奏效。
将 ul 的 padding-left 设置为 0，再恢复swiper 的 loop 设置，就正常了

完整代码

html 复制代码

<body>
  <div>
    <div class="picBox">
      <div class="swiper">
        <ul class="swiper-wrapper">
          <li class="swiper-slide">
            <div class="imgBox"><img src="./img/float1.png" alt=""></div>
            <p>图1</p>
          </li>
          <li class="swiper-slide">
            <div class="imgBox"><img src="./img/float2.png" alt=""></div>
            <p>图2</p>
          </li>
          <li class="swiper-slide">
            <div class="imgBox"><img src="./img/float3.png" alt=""></div>
            <p>图3</p>
          </li>
          <li class="swiper-slide">
            <div class="imgBox"><img src="./img/float4.png" alt=""></div>
            <p>图4</p>
          </li>
          <li class="swiper-slide">
            <div class="imgBox"><img src="./img/float5.png" alt=""></div>
            <p>图5</p>
          </li>
        </ul>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
  </div>
  <style lang="css">
    .picBox {
      background: #efefef;
    }

    .swiper {
      width: calc(160px * 5 + 10px * 4);
    }

    ul.swiper-wrapper {
      list-style: none;
      padding-left: 0;
    }

    li.swiper-slide {
      width: 160px;
      background: #fff;
    }

    li.swiper-slide .imgBox {
      width: 160px;
      height: 400px;
    }

    li.swiper-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    li.swiper-slide p {
      text-align: center;
    }
  </style>
  <script>
    var mySwiper = new Swiper('.swiper', {
      loop: true, // 循环模式选项
      slidesPerView: 5, // 一页几个
      slidesPerGroup: 5, // 几个一组
      spaceBetween: 10, // 空隙
      slidesOffsetBefore: 0, // 左边框偏移量
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

    })        
  </script>
</body>