Swiper JS 滚动条的奇怪行为

Question

当我设置

loop: true,
scrollbar: { el: '.swiper-scrollbar' },
centeredSlides:true

作为 Swiper JS 的选项，滚动条远离左侧。

我期望的行为是滚动条在第一张幻灯片上完全位于左侧位置，在最后一张幻灯片上完全位于右侧位置。

演示

loop: true,
scrollbar: { el: '.swiper-scrollbar' },
centeredSlides:true

var swiper = new Swiper(".swiper-container", {
  slidesPerView:5,
  centeredSlides:true,
  loop:true,
  scrollbar: {
    el: ".swiper-scrollbar",
  }
});

难道我做错了什么？

• https://codepen.io/pen/rNeGKrB

Answer 1

“这是设计使然。滚动条not支持循环模式”

（swiper官方回答）。请阅读此 Github 问题：https://github.com/nolimits4web/swiper/issues/2315

也不能centeredSlides:true很好地结合.swiper-scrollbar

支持设置（截至 9 月 20 日）

您应该使用centeredSlides:false& loop:false。

/* Support setting */
var swiper = new Swiper(".swiper-container", {
  slidesPerView:5,
  centeredSlides:false,
  loop:false,
  scrollbar: {
    el: ".swiper-scrollbar",
  }
});

SUM：无法解决/回答这个问题（您可以打开 GitHub Issue/feature-request 她： https: //github.com/nolimits4web/swiper/issues）。

工作示例：

var swiper = new Swiper(".swiper-container", {
  slidesPerView:3,
  centeredSlides:false,
  spaceBetween: 10,
  loop:false,
  grabCursor: true,
  scrollbar: {
    el: ".swiper-scrollbar",
  }
});

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: 150px;
}

.swiper-slide {
  text-align: center;
  font-size: 15px;
  background: #fff;
  border: 1px solid lightgray;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>
  <!-- Swiper -->
  
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
    <!-- Add Scrollbar -->
    <div class="swiper-scrollbar"></div>
  </div>
  
  
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

• 演示： https: //swiperjs.com/demos/#scrollbar
• API 文档： https: //swiperjs.com/api/#scrollbar