Swiper JS - show part of next slide

Question

I want to show a part of the second slide into view. Around 20-30%. I have set slidesPerView to 2.1 (on mobile devices!) to show part of the next slide. However, when scrolling through the slides it does not snap to the start of the container which results in parts of slides not within the view when scrolling through the swiper.

I've tried setting the height of the slide at 70% but this gives the same issue. I've also been fiddling with the slidesOffsetAfter parameter but no luck.

• Slide show snap to start of the container showing the whole image
• Next slide should be partially visible

To see the current state of the project: live dev environment

You can see the issue on desktop in horizontal swiper and on tablet view in the vertical swiper.

CSS

<!-- swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<style>
@media screen and (max-width: 1079px){
.swiper-section {
    justify-content: flex-start;
    margin-top: 194px;
}
}

@media screen and (max-width: 1079px){
.main-navigation {
  left: 45px;
  top: 45px;
}
}

@media screen and (max-width: 1079px){
.sub-navigation {
  right: 45px;
  top: 45px;
}
}

@media screen and (max-width: 1079px){
.swiper-container {
    height: 965px;
}
}

.swiper-slide {
padding-bottom: 45px;
}

@media screen and (max-width: 1079px) {
.swiper-slide {
padding-bottom: 0px;
}
}

.swiper-slide:nth-child(even) {
 height: 75%;
 width: 45vw !important;
}

.swiper-slide:nth-child(odd) {
 height: 100%;
  width: 55vw !important;
}

@media screen and (max-width: 1079px) {
.swiper-div {
margin: 0px 45px 0px 45px;
}
}

@media screen and (max-width: 1079px) {
.swiper-slide:nth-child(even) {
     height: 100%!important;
     width: 100% !important;
}
}

@media screen and (max-width: 1079px) {
.swiper-slide:nth-child(odd) {
 height: 100%!important;
 width: 100% !important;
}
}


.swiper-slide>img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.swiper-button-prev,
.swiper-button-next {
  display: none;
}

.swiper-container-horizontal>.swiper-pagination-progressbar {
  width: 175px;
  margin-left: 65px;
  border-radius: 50px;
  }

.swiper-pagination-progressbar {
  margin-top: 733px;
  background: #bababa;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: #888888;
}

.swiper-container-horizontal>.swiper-pagination-progressbar {
height: 12px;
}

.swiper-container-vertical>.swiper-pagination-progressbar {
display: none;
}

</style>

JS

<!-- swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- Swiper - Extra Step - add arrows and pagination html markup by code (Append) -->
<script>
  var swiperNodes = "";
  var pagination = '<div class=swiper-pagination></div>';
  var next_prev_buttons = '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>'; 
  var scrollbar = '<div class="swiper-scrollbar"></div>';
  var swiperNodes = swiperNodes.concat(pagination, next_prev_buttons);
  /* loop throw all swipers on the page */
  $('.swiper-container').each(function( index ) {
    $( this ).append(swiperNodes);
  });
</script>
<!-- swiper JS Initialize -->
<script>
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    slidesPerView: 1,
    spaceBetween: 30,
    freeMode: false,
    loop: true,
    centeredSlides: false,
    // Enable lazy loading
    lazy: true,
     mousewheel: {
    invert: true,
    },
    keyboard: {
    enabled: true,
    onlyInViewport: false,
    },
    scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'progressbar',
    },
    keyboard: {
      enabled: true,
    },
    breakpoints: {
      0: { /* when window >=0px - webflow mobile landscape/portriat */
        slidesPerView: 1,
        spaceBetween: 10,
        slidesOffsetBefore: 0,
        direction: 'vertical',
      },
      767: { /* when window >= 767px - webflow tablet */
        slidesPerView: 2.1,
        spaceBetween: 30,
        slidesOffsetBefore: 0,
        direction: 'vertical',
      },
      1279: { /* when window >= 988px - webflow desktop */
        slidesPerView: 2,
        spaceBetween: 20,
        slidesOffsetBefore: 0,
      }
    },
    /* uncomment if you want autoplay slider
    autoplay: {
      delay: 3000,
    },
    */
    /* uncomment if you want scrollbar
     scrollbar: {
        el: '.swiper-scrollbar',
        hide: true,
      },
    */
  })
</script>

Answer 1

This one will show a partial view of the next and previous slide. In my case it's a full width carousel so I'm using vw in the CSS, but you can use pixels or %

const swiper = new Swiper( selector, {
            slidesPerView: 'auto',
            centeredSlides: true,
            loop: true,
            slidesPerGroup: 1,
            paginationClickable: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        } );

And the CSS:

.swiper-slide {
    width: 80vw;
  }

Answer 2

you can change slidesPerView to float number for example 1.5 and if you set optional parameter to centeredSlides: true,loop: trueyou can see little of both prev and next slider

Answer 3

I've managed to show a part of the next slide only and both creating a div outside the div.swiper-container and style the inner div with padding, which can create the wanted effect.

If you only want to show the preview of the next, style only the padding-right or padding-left and you should be good to go.

The padding applied should consider the spaces between the containers. In my case the spaceBetween was 10, so I used 20px as padding.

Here's some pseudo code:

<script>
const swiper = new Swiper( '.my-class', {
            slidesPerView: 2,
            spaceBetween: 10,
            slidesPerGroup: 2,
            centeredSlides: false,
            loop: true,
            paginationClickable: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        } );
</script>

<style>
.full-width {
    margin: 0 calc(-100vw / 2 + 100% / 2) !important;
    width: 100vw;
}

.my-class {
   padding: 20px;
}
</style>

<div class="full-width">
  <div class="swiper-container my-class">
    ...
  </div>
<div>