Swiper JS滑动失效、分页页码错误，如何实现首元素居中隐藏左侧元素？

核心问题修复步骤 #

1. 实现首元素居中且左侧元素隐藏 #

• 修改.swiper容器的溢出属性，隐藏超出范围的元素：

  .swiper {
    padding-top:calc(10/ 1366 * 100vw);
    overflow: hidden; /* 替换原overflow: visible */
    max-width: 100%;
    border:1px solid red;
    max-width: calc(552.14/ 1366 * 100vw); /* 限制容器宽度与slide一致 */
    margin: 0 auto; /* 容器居中 */
  }
  

• 移除.swiper-slide的自定义margin，避免干扰Swiper内置布局：

  .swiper-slide {
    /* 移除该行：margin: calc( -14/ 1366 * 100vw); */
  }
  

2. 修复无法滑动问题 #

• 在Swiper初始化配置中添加触摸滑动保障参数：

  var swiper = new Swiper('.mySwiper', {
    // ...其他配置
    touchRatio: 1,
    simulateTouch: true,
    // ...其他配置
  });
  

3. 修复分页页码显示错误 #

• 针对loop模式下的分页计算，修改格式化函数获取真实索引和总数：

  pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
    formatFractionCurrent: function (n, swiper) {
      const realCurrent = swiper.realIndex + 1;
      return realCurrent < 10 ? '0' + realCurrent : realCurrent.toString();
    },
    formatFractionTotal: function (n, swiper) {
      const realTotal = swiper.slides.length - 2;
      return realTotal < 10 ? '0' + realTotal : realTotal.toString();
    },
  },
  

• 若不需要循环轮播，直接关闭loop: true改为loop: false，分页格式化函数可简化为直接返回补零后的n值。

完整修改后代码 #

JS代码 #

$( document ).ready(function() {
    console.log( "ready!" );
  var swiper = new Swiper('.mySwiper', {
    loop: true,
    slidesPerView: 'auto',
    spaceBetween: 62.5,
    centeredSlides: true,
    touchRatio: 1,
    simulateTouch: true,
    breakpoints: {
      768: {
        slidesPerView: 2,
        spaceBetween: 80,
        centeredSlides: false,
      },
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'fraction',
      formatFractionCurrent: function (n, swiper) {
        const realCurrent = swiper.realIndex + 1;
        return realCurrent < 10 ? '0' + realCurrent : realCurrent.toString();
      },
      formatFractionTotal: function (n, swiper) {
        const realTotal = swiper.slides.length - 2;
        return realTotal < 10 ? '0' + realTotal : realTotal.toString();
      },
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
});

CSS代码 #

.swiper {
  padding-top:calc(10/ 1366 * 100vw);
  overflow: hidden;
  max-width: 100%;
  border:1px solid red;
  max-width: calc(552.14/ 1366 * 100vw);
  margin: 0 auto;
}

.swiper-wrapper {
  padding-bottom: calc(136/ 1366 * 100vw);
}

.swiper-slide {
  border:1px solid pink;
  max-width:100%;
  width: calc( 552.14/ 1366 * 100vw);
  height: calc( 231/ 1366 * 100vw);
  background:#fff;
  border-radius:calc( 30/ 1366 * 100vw);
  border: 6px solid #B5E9EE;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 100%;
  box-shadow: calc(8/ 1366 * 100vw) calc(8/ 1366 * 100vw) calc(9/ 1366 * 100vw) rgb(0 0 0 / 16%);
}

.slide_text {
  display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: calc(51/ 1366 * 100vw);
    padding-right: calc(6/ 1366 * 100vw);
    gap: calc(40/ 1366 * 100vw);
}

.num {
  font-family: NotoSansJP-Black;
  font-size: calc(36/ 1366 * 100vw);
  line-height: calc(43.2/ 1366 * 100vw);
  color: #1F2774;
  border-bottom: 3px solid #1F2774;
}

.text {
  font-family: NotoSansJP-Regular;
  font-size: calc(36/ 1366 * 100vw);
  line-height: calc(43.2/ 1366 * 100vw);
}

.swiper-pagination{
  position: absolute;
    font-family: NotoSansJP-Bold;
    font-size: calc( 28/ 1366 * 100vw);
    line-height: calc( 40/ 1366 * 100vw);
    top: calc( 37/ 1366 * 100vw);
    left: calc( 81/ 1366 * 100vw);
    text-align: center;
    display: block;
    width: calc( 115/ 1366 * 100vw);
}

.swiper-button-prev {
  width: calc( 60/ 1366 * 100vw);
  height: calc( 61/ 1366 * 100vw);
  background-color: #F6F3DC;
  border-radius: calc( 100/ 1366 * 100vw);
  color: transparent;
}

.swiper-button-next {
  width: calc( 60/ 1366 * 100vw);
  height: calc( 61/ 1366 * 100vw);
  background-color: #F6F3DC;
  border-radius: calc( 100/ 1366 * 100vw);
  color: transparent;
}

.gallery_navigation .fa-chevron-left:before {
    content: "\f053";
    font-size: calc( 28/ 1366 * 100vw);
    position: absolute;
    top: calc( 17/ 1366 * 100vw);
    left: calc( 23/ 1366 * 100vw);
    color: black;
    font-weight: 900;
}

.gallery_navigation .fa-chevron-right:before {
    content: "\f054";
    font-size: calc( 28/ 1366 * 100vw);
    position: absolute;
    top: calc( 17/ 1366 * 100vw);
    left: calc( 24/ 1366 * 100vw);
    color: black;
    font-weight: 900;
}

.gallery_navigation {
  display: flex;
    justify-content: center;
    align-items: center;
    padding: calc( 52/ 1366 * 100vw) 0;
    position: absolute;
    width: calc( 276/ 1366 * 100vw);
    left: calc( 540/ 1366 * 100vw);
    text-align: center;
    top: calc( 238/ 1366 * 100vw);
}

HTML代码（无修改） #

<div class="swiper mySwiper">
      <div class="swiper-wrapper">
          <div class="swiper-slide">
          <div class="slide_text">
            <div class="num">01</div>
            <div class="text">カードお申し込み</div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide_text">
            <div class="num">02</div>
            <div class="text">入会審査・カード発行</div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide_text">
            <div class="num">03</div>
            <div class="text">カード到着行</div>
          </div></div>
        <div class="swiper-slide">
        <div class="slide_text">
            <div class="num">04</div>
            <div class="text">アプリをダウンロード</div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide_text">
            <div class="num">05</div>
            <div class="text">アプリでカード番号を確認</div>
          </div>
        </div>
      </div>
      <div class="gallery_navigation">
        <div class="swiper-button-prev"><i class="far fa-chevron-left"></i></div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"><i class="far fa-chevron-right"></i></div>
      </div>
    </div>

内容的提问来源于stack exchange，提问作者kenken