Search code examples
javascriptswiper.js

Swiper slider with loop and offset doesn't show portion of the final slide before using nav

I have a looped swiper slider with an offset and once you start swiping through it will show a portion of the final slide to the left of the active slide. Is it possible to make it so it displays like this on load rather than having a white gap to the left of the initial active slide?

I tried calling swiper.update(); on load thinking that might trigger the loop but it didn't seem to help.

const swiper = new Swiper('.swiper', {
    direction: 'horizontal',
    slidesPerView: 'auto',
    spaceBetween: 30,
    loopedSlides: 4,
    slidesOffsetBefore: 150,
    loop: true,
    grabCursor: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
});
swiper.update();
.swiper .swiper-slide {
  max-width:50%;
  height:300px;
  opacity:.5;
  position:relative;
}

.swiper-slide-active {
  opacity:1;
}

.swiper-slide img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="https://picsum.photos/500/200" /></div>
    <div class="swiper-slide"><img src="https://picsum.photos/700/300" /></div>
    <div class="swiper-slide"><img src="https://picsum.photos/900/150" /></div>
    <div class="swiper-slide"><img src="https://picsum.photos/650/200" /></div>
    <div class="swiper-slide"><img src="https://picsum.photos/550/200" /></div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

Here is what it looks like currently on load:

enter image description here

And this is what I am going for on initial load:

enter image description here

Solution

  • loopedSlides does not exist in swiper v11. Since the 9th version it does not duplicate slides with loop: true. You can start with the second slide by setting initialSlide: 1 so that the first slide fills the void:

    const swiper = new Swiper('.swiper', {
    slidesPerView: 'auto',
    spaceBetween: 30,
    slidesOffsetBefore: 150,
    loop: true,
    grabCursor: true,
    initialSlide: 1,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
});
    .swiper .swiper-slide {
  max-width:50%;
  height:300px;
  opacity:.5;
  position:relative;
}

.swiper-slide-active {
  opacity:1;
}

.swiper-slide img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="https://picsum.photos/500/200" /></div>
    <div class="swiper-slide"><img src="https://picsum.photos/700/300" /></div>
    <div class="swiper-slide"><img src="https://picsum.photos/900/150" /></div>
    <div class="swiper-slide"><img src="https://picsum.photos/650/200" /></div>
    <div class="swiper-slide"><img src="https://picsum.photos/550/200" /></div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>