CODEWITHSUNDEEP
javascriptswiper.js
Stefano
Stefano

Reputation: 121

Strange behaviour of Swiper JS scrollbar

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.com/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.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>

Am I doing something wrong?

Upvotes: 3

Views: 11107

Answers (1)

Ezra Siton
Ezra Siton

Reputation: 7781

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

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

Also the centeredSlides:true not working well combine 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.com/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.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>

Upvotes: 5

Related Questions