循环轮播组件点击导航前无法显示右侧悬露出的下一张幻灯片

我用Keen Slider做了一个循环轮播，点击导航按钮就能切换上/下一张幻灯片，而且特意没给轮播加overflow: hidden，就是想让左右边缘能露出相邻幻灯片的一部分，效果一开始还挺好的。

但问题来了：滑到第8张（也就是我原始幻灯片组的最后一张）之后，点击"下一张"按钮前，右侧本该露出的下一张幻灯片位置会出现空白，只有点击导航后那张幻灯片才会跳出来显示。左边的上一张幻灯片从来没出过这个问题，只有右侧的下一张在到第8张之后会有这个空白的情况。

另外还有个小细节，不知道有没有关系：如果把配置里的perView设为5，加载时根本看不到右侧下一张的边缘，只有点击导航后才会出现；但设为4的话，在循环到第8张之前都能正常看到右侧的边缘。对应的配置代码是这样的：

'(min-width: 1024px)': {
    slides: {
        perView: 4,
        spacing: 8
    }
}

对了，代码里还有一些注释掉的JS，是我之前想做自动播放，点击导航后就停止的功能，还没确定要不要做，只是先写了点草稿，提一下免得大家疑惑~

下面是我用到的完整代码：

JavaScript代码 #

/* Lazy Load Effect */

const pixelImage = document.querySelectorAll(".pixel-load")

pixelImage.forEach(div => {
  const img = div.querySelector("img")

  function loaded() {
    div.classList.add("loaded")
  }

  if (img.complete) {
    loaded()
  } else {
    img.addEventListener("load", loaded)
  }
})


/* Keen Slider */

// var animation = { duration: 40000, easing: (t) => t }
new KeenSlider("#gallery-slider", {
  loop: true,
  mode: "free-snap",
  slides: {
    perView: 1.5,
    renderMode: "precision",
    spacing: 8
  },
  breakpoints: {
    '(min-width: 768px)': {
      slides: {
        perView: 3,
        spacing: 8
      }
    },
    '(min-width: 1024px)': {
      slides: {
        perView: 4,
        spacing: 8
      }
    }
  },
  created: function(instance) {
    document.getElementById("gallery-slider").classList.add("loaded");
    //s.moveToIdx(4, true, animation);
    document
      .getElementById("arrow-left")
      .addEventListener("click", function() {
        instance.prev();
      });
    document
      .getElementById("arrow-right")
      .addEventListener("click", function() {
        instance.next();
      });
  }
  // updated(s) {
  //    s.moveToIdx(s.track.details.abs + 4, true, animation);
  // },
  // animationEnded(s) {
  //    s.moveToIdx(s.track.details.abs + 4, true, animation);
  // }
});

CSS代码 #

/* ==========================================================================
   #BASE
   ========================================================================== */

html {
  font-size: 62.5%;
  margin: 0;
  padding: 0;
}

body {
  font-size: 12px;
  font-family: "Arial", sans-serif;
  margin: 0;
  padding: 64px 0 0;
  text-transform: uppercase;
}

h2 {
  font-size: 12px;
  font-weight: 400;
  margin: 0 16px 16px;
  padding: 0;
}

figure {
  margin: 0;
  padding: 0;
}

img {
  height: auto;
  width: 100%;
  max-width: 100%;
}


/* ==========================================================================
   #KEEN SLIDER
   ========================================================================== */

.keen-slider {
  display: flex;
  align-content: flex-start;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
  user-select: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.keen-slider .keen-slider__slide {
  min-height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}


/* ==========================================================================
   #GALLERY
   ========================================================================== */


/**
 * My overrides for the Keen Slider gallery.
 *
 * 1. Remove `overflow: hidden` from the slider and add it to the parent. This
 *    allows the slider to align with the grid but also bleed off the edges of
 *    the page.
 * 2. Align container with the global grid.
 */

.gallery {
  margin-bottom: 64px;
  overflow: hidden;
  /* [1] */
  padding: 0 32px;
  /* [2] */
}

.gallery .keen-slider {
  overflow: visible;
  /* [1] */
}


/**
 * As the widths for each slide are set in Javascript. We add widths to slides
 * before `.keen-slider` has loaded to keep the layout consistent and help with
 * the Cumulative Layout Shift (CLS) and performance.
 */

.keen-slider:not(.loaded) .keen-slider__slide {
  width: calc((100vw / 1.5) - 24px);
}

@media(min-width: 48em) {
  .keen-slider:not(.loaded) .keen-slider__slide {
    width: calc((100vw - 48px) / 3);
  }
}

@media(min-width: 64rem) {
  .keen-slider:not(.loaded) .keen-slider__slide {
    width: calc((100vw - 56px) / 4);
  }
}

/**
 * Navigation for the gallery (prev/next).
 */

.gallery__nav {
  display: flex;
  justify-content: space-between;
  margin: 0 0 16px;
  width: 100%;
}

.gallery__nav .arrow {
  cursor: pointer;
  user-select: none;
}


/* ==========================================================================
   #PIXEL LOAD
   ========================================================================== */


/**
 * Add a pixelated effect to images while the load.
 */

.pixel-load {
  overflow: hidden;
  position: relative;
}

.pixel-load__preload img {
  image-rendering: pixelated;
  position: absolute;
  inset: 0;
  opacity: 1;
  pointer-events: none;
}

.loaded .pixel-load__preload img {
  animation: loaded .32s .16s steps(1, end) both;
}

@keyframes loaded {
  0% {
    scale: 2;
  }

  33% {
    scale: 1.5;
  }

  66% {
    scale: 1;
  }

  100% {
    opacity: 0;
    z-index: 1;
  }
}

HTML代码 #

<script src="https://cdn.jsdelivr.net/npm/keen-slider@6.8.5/keen-slider.min.js"></script>
<!-- Keen Slider -->
<div class="gallery">
  <div class="gallery__nav grid">
    <div class="grid__col">
      <a id="arrow-left" class="arrow arrow--left shuffle">Previous</a>
    </div>
    <div class="grid__col">
      <a id="arrow-right" class="arrow arrow--right shuffle">Next</a>
    </div>
  </div>
  <div id="gallery-slider" class="keen-slider">
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 1" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 1</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 2" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 2</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 3" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 3</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 4" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 4</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 5" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 5</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 6" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 6</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 7" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 7</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 8" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 8</figcaption>
      </figure>
    </div>
  </div>
</div>

备注：内容来源于stack exchange，提问作者user1406440