如何将幻灯片与滑动器滑块对齐？答案

【问题标题】：How can I align the slides to the swiper slider?如何将幻灯片与滑动器滑块对齐？
【发布时间】：2021-01-08 22:19:41
【问题描述】：

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

换句话说，选择第一或上幻灯片时，它应该是这样的：

但目前它看起来像这样：

换句话说，如果第一张幻灯片是活动的，那么它的左边只有最后一张幻灯片，倒数第二张幻灯片丢失了。

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>

【问题讨论】：

你能禁用无限滑动吗？然后尝试添加loop:false
对齐左（选择第一张幻灯片时）和右（选择最后一张幻灯片 b>)。
@Rayees AC 感谢您的参与，但我需要使用无限循环。换句话说，在加载站点时，滑块应该从幻灯片编号 1 开始，并且看起来像在第一个屏幕截图中。目前，滑块专门从第三张幻灯片开始，所以一切看起来都是对称的，但这不是正确的选择......
这个 [link]github.com/nolimits4web/swiper/issues/2942 讨论是否与问题有关？我在运行代码时注意到的一件事是，行为似乎确实会根据视口的宽度而改变，但我没有深入研究（例如，立方体模式根本不起作用，它似乎在狭窄的视口。

标签： javascript jquery css slider swiper

【解决方案1】：

如果需要，Swiper 似乎可以通过创建重复的幻灯片来工作（以便有一些“备用”来显示它在循环时是否“用完”。

您有 7 张幻灯片，并且希望一次显示 5 张，所以我觉得它应该有足够的内容，而无需创建任何备用 - 即总是有额外的 2 张幻灯片等待展示。但是，Swiper 算法中一定有一些东西使它不起作用，并且在您突出显示的情况下它“耗尽” - 例如当幻灯片 1 是主幻灯片时。

如果你添加

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

到选项然后用

loop: true, //正如你现在所拥有的

和取出断点选项（https://swiperjs.com/api/ 的文档说断点不适用于循环）然后屏幕上显示正确数量的幻灯片，因为它自动循环或与用户一起循环点击。

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

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

由于您在 1023 像素处有一个断点，我想如果视口比这宽，您想显示 5 个完整的幻灯片。看来这是不可能的，因为它说断点不适用于循环。这很奇怪，因为循环播放和屏幕上完全可见的幻灯片数量似乎彼此之间没有任何关系。如果它对您的应用程序很重要，是否值得在 github 上提出？

【讨论】：