When I set

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

as options for Swiper JS, the scrollbar is away from the left.

The behavior I'm expecting is the scrollbar to be in full left position on the first slide and fully right positioned on the last slide.

Demo

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

<link href=".4.5/css/swiper.min.css" rel="stylesheet"/>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><br><br><br>Slide 1<br><br><br></div>
    <div class="swiper-slide"><br><br><br>Slide 2<br><br><br></div>
    <div class="swiper-slide"><br><br><br>Slide 3<br><br><br></div>
    <div class="swiper-slide"><br><br><br>Slide 4<br><br><br></div>
    <div class="swiper-slide"><br><br><br>Slide 5<br><br><br></div>
    <div class="swiper-slide"><br><br><br>Slide 6<br><br><br></div>
    <div class="swiper-slide"><br><br><br>Slide 7<br><br><br></div>
    <div class="swiper-slide"><br><br><br>Slide 8<br><br><br></div>
    <div class="swiper-slide"><br><br><br>Slide 9<br><br><br></div>
    <div class="swiper-slide"><br><br><br>Slide 10<br><br><br></div>
  </div>
  <!-- Add Scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

<script src=".4.5/js/swiper.min.js"></script>

When I set

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

as options for Swiper JS, the scrollbar is away from the left.

The behavior I'm expecting is the scrollbar to be in full left position on the first slide and fully right positioned on the last slide.

Demo

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

<link href="https://cdnjs.cloudflare./ajax/libs/Swiper/5.4.5/css/swiper.min.css" rel="stylesheet"/>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><br><br><br>Slide 1<br><br><br></div>
    <div class="swiper-slide"><br><br><br>Slide 2<br><br><br></div>
    <div class="swiper-slide"><br><br><br>Slide 3<br><br><br></div>
    <div class="swiper-slide"><br><br><br>Slide 4<br><br><br></div>
    <div class="swiper-slide"><br><br><br>Slide 5<br><br><br></div>
    <div class="swiper-slide"><br><br><br>Slide 6<br><br><br></div>
    <div class="swiper-slide"><br><br><br>Slide 7<br><br><br></div>
    <div class="swiper-slide"><br><br><br>Slide 8<br><br><br></div>
    <div class="swiper-slide"><br><br><br>Slide 9<br><br><br></div>
    <div class="swiper-slide"><br><br><br>Slide 10<br><br><br></div>
  </div>
  <!-- Add Scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

<script src="https://cdnjs.cloudflare./ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>

Am I doing something wrong?

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

• javascript
• swiper.js

1 Answer 1

"It is by design. The scrollbar is not supported with loop mode"

(swiper official answer). Read under this Github Issue: https://github./nolimits4web/swiper/issues/2315

Also the centeredSlides:true not working well bine with .swiper-scrollbar

Support setting (True to Sep 20)

You should use the centeredSlides:false & loop:false.

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

SUM: No way to solve/answer this (You could open GitHub issue/feature-request her: https://github./nolimits4web/swiper/issues).

Working example:

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./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./swiper/swiper-bundle.min.js"></script>

• Demo: https://swiperjs./demos/#scrollbar
• API docs: https://swiperjs./api/#scrollbar