javascript - How to keep slidesPerGroup when swipe back after reachEnd? - Stack Overflow

I have 7 slides and swiper setting loop: false, slidesPerView: 3, slidesPerGroup: 3,

1. Swipe 3 cards at a time.
2. When there are not enough cards left for the next group of 3, it should show the last 3 cards.

when swipe next it works fine: 123 -> 456 -> 567

But when swipe back it acts: 567 -> 456 -> 123

And I want it keep three slidesPerGroup : 567 -> 345 -> 123

Can I do this by Swiper.js?

<div class="container">   
    <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>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</div>
<script src=".min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
  new Swiper('.swiper-container', {
        loop: false,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView: 3,
        slidesPerGroup: 3,
        spaceBetween: 20,
    });
});
</script>

CodePen