如何将幻灯片与滑动条滑块对齐？

Question

下午好。请告诉我如何对齐幻灯片，以便当您 select 左侧或右侧的第一张或最后一张幻灯片时，下一张和上一张幻灯片的数量相同。

换句话说，当 select 播放第一张或最后一张幻灯片时，它应该是这样的：

但目前它看起来像这样：

换句话说，如果第一张幻灯片处于活动状态，则只有它左侧的最后一张幻灯片，倒数第二张幻灯片将丢失。

var sliderSelector = '.swiper-container',
  options = {
    init: true,
    initialSlide: 1,
    loop: true,
    speed: 1200,
    slidesPerView: 1.6848, // or 'auto'
    spaceBetween: 0,
    centeredSlides: true,
    mousewheelControl: false,
    lazyLoading: true,
    slideToClickedSlide: true,
    effect: 'coverflow', // 'cube', 'fade', 'coverflow',
    autoplay: {
      delay: 10000,
      disableOnInteraction: false,
    },
    coverflowEffect: {
      rotate: 0, // Slide rotate in degrees
      stretch: 400, // Stretch space between slides (in px)
      depth: 380, // Depth offset in px (slides translate in Z axis)
      modifier: 1, // Effect multipler
      slideShadows: false, // Enables slides shadows
    },
    grabCursor: true,
    parallax: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      renderBullet: function(index, className) {
        return `<span class="dot swiper-pagination-bullet">${index +1}</span>`;
      },
    },
    navigation: {
      nextEl: 0,
      prevEl: 0,
    },
    breakpoints: {
      1023: {
        slidesPerView: 5,
        spaceBetween: 0
      }
    },
    // Events
    on: {
      imagesReady: function() {
        this.el.classList.remove('loading');
      }
    }
  };
var mySwiper = new Swiper(sliderSelector, options);

// Initialize slider
mySwiper.init();

[class^="swiper-button-"],
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet::before {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  background: #E5E5E5;
}

.container {
  width: 1200px;
}

.swiper-slide-active img {
  outline: 10px solid rgba(255, 255, 255, 0.5);
  outline-offset: -10px;
}

.swiper-slide img {
  outline: 10px solid rgba(255, 255, 255, 0.5);
  outline-offset: -10px;
}

.swiper-slide img {
  position: relative;
}

.swiper-container {
  width: 100%;
  min-height: 470px;
  height: auto;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
}

.swiper-slide img {
  display: block;
  max-width: 100%;
  height: auto;
}

.swiper-container.swiper-container-coverflow {
  padding-top: 2%;
}

.swiper-container.loading {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-in;
}

.swiper-container:hover .swiper-button-prev,
.swiper-container:hover .swiper-button-next {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
}

.swiper-slide .entity-img {
  display: none;
}

.swiper-slide .content {
  position: absolute;
  top: 40%;
  left: 0;
  width: 50%;
  padding-left: 5%;
  color: #fff;
}

.swiper-slide .content .title {
  font-size: 2.6em;
  font-weight: bold;
  margin-bottom: 30px;
}

.swiper-slide img {
  filter: brightness(20%);
  transition: all 0.5s ease-in;
  position: relative;
  z-index: 2;
}

.swiper-slide-prev img {
  filter: brightness(40%);
  transition: all 0.5s ease-in;
}

.swiper-slide-next img {
  filter: brightness(40%);
  transition: all 0.5s ease-in;
}

.swiper-slide {
  outline: 10px solid #ffffff;
  outline-offset: -10px;
  position: relative;
  z-index: 5;
}

swiper-slide-next img {
  filter: brightness(50%);
  transition: all 0.5s ease-in;
}

.swiper-slide-active img {
  filter: brightness(100%);
  transition: all 0.5s ease-in;
}

.swiper-slide .content .caption {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}

[class^="swiper-button-"] {
  width: 44px;
  opacity: 0;
  visibility: hidden;
}

.swiper-button-prev {
  -webkit-transform: translateX(50px);
  transform: translateX(50px);
}

.swiper-button-next {
  -webkit-transform: translateX(-50px);
  transform: translateX(-50px);
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 9px;
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 0.4;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 0px solid #fff;
  border-radius: 50%;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:hover,
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
  transition: all 5s ease-in;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  border-width: 1px;
}

@media (max-width: 1180px) {
  .swiper-slide .content .title {
    font-size: 25px;
  }
  .swiper-slide .content .caption {
    font-size: 12px;
  }
}

@media (max-width: 1023px) {
  .swiper-container {
    height: 40vw;
  }
  .swiper-container.swiper-container-coverflow {
    padding-top: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.min.js"></script>


<div class="wrapper">
  <div class="container">

    <section class="swiper-container loading">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>

      </div>

      <!-- If we need pagination -->
      <div class="swiper-pagination"></div>
      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev swiper-button-white"></div>
      <div class="swiper-button-next swiper-button-white"></div>
    </section>
  </div>
</div>

Answer 1

Swiper 似乎可以通过在需要时创建重复的幻灯片来工作（以便在循环时显示一些 'spares' 是否 'runs out'。

您有 7 张幻灯片并且想要同时显示 5 张，所以我觉得它应该足够了而无需创建任何备用幻灯片 - 即总是有额外的 2 张幻灯片在等待展示。但是，Swiper 算法中一定有某些东西使它不起作用，并且在您突出显示的情况下它 'runs out' - 例如当幻灯片 1 为主幻灯片时。

如果你添加

loopAdditionalSlides: 10,//（10 是一个慷慨的猜测，值得尝试更低的数字）

到选项然后用

loop: true, // 和现在一样

和去掉断点选项（https://swiperjs.com/api/ 处的文档说断点不适用于循环）然后屏幕上显示正确数量的幻灯片它会自动循环或通过用户点击循环。

所以，这解决了眼前的问题。

但是，我注意到滑块的响应似乎不太灵敏 - 随着视口变窄，幻灯片的宽度不会变窄，并且 slidesPerView 参数似乎没有效果。我猜 1200px 的硬编码容器宽度加上 slidesPerView: 1.6848 说明了这一点——Swiper 假设它有 1200px 可以玩，不管视口的实际宽度如何。有没有办法让 Swiper 缩小与视口宽度成比例的幻灯片宽度，以便在所有 devices/window 宽度上看到相同类型的视图（5 张幻灯片，4 张被部分隐藏）？

由于您在 1023 像素处设置了断点，我想如果视口比这更宽，您想要显示 5 张完整的幻灯片。看来这是不可能的，因为它说断点不适用于循环。这很奇怪，因为循环和有多少张幻灯片在屏幕上完全可见似乎彼此没有任何关系。如果它对您的申请很重要，可能值得在 github 上提出？

如何将幻灯片与滑动条滑块对齐？

How can I align the slides to the swiper slider?

javascript

jquery

css

slider

swiper