Почему при пролистывании Swiper JS назад слайды отображаются неверно?

Question

Я хотел сделать так, чтобы в Swiper JS работали одновременно пагинация с фракцией и прогрессбар. Но в пагинации с фракцией возникла проблема: при пролистывании слайдов о обратном порядке почему-то слайд который был третьим в пагинации с фракцией отображается, как 1 или 2 и тоже самое с другими слайдами. На картинке, которую я прикрепил данный слайд является первым, а при пролистывании назад отображается 3.

Сам сайт http://cn39614.tmweb.ru/ Весь код jsfiddle.net/k8L9t4j3/

var totalSlide = $('.image-slider .swiper-slide').length;
    const swiper = new Swiper('.image-slider', {
        // Optional parameters
        slidesPerView: 3,
        spaceBetween: 30,
        centeredSlides: true,
        loop: true,
        loopedSLides: 3,
        simulateTouch: true,
        grabCursor: true,
        speed: 800,
        pagination: {
            el: '.swiper-pagination',
            type: 'progressbar'
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: {
            delay: 1000,
        }
    });


    swiper.on('slideChange', function() {
        var fragment = document.querySelector('.image-slider__current');
        var current = parseInt($('.swiper-slide-active img').attr('alt')) + 1;
        if (current > totalSlide)
            current = 1;
        var idx = current < 10 ? ("0" + current) : current;
        var tdx = totalSlide < 10 ? ("0" + totalSlide) : totalSlide;
        fragment.innerHTML = (idx + '/' + tdx);
    });

<section class="spaces">
        <div class="wrapper">
            <div class="content">
                <div class="spaces-title">
                    <h3>Our Spaces</h3>
                    <p>Our space is designed to give you a different experience when working with your team or personally</p>
                    <div class="plug"></div>
                </div>
                <div class="image-slider swiper-container">
                    <div class="image-slider__wrapper swiper-wrapper">
                        <!-- Slides -->
                        <div class="image-slider__slide swiper-slide">
                            <div class="image-slider__image one">
                                <img src="img/space-1.jpg" alt="1">
                            </div>
                        </div>
                        <div class="image-slider__slide swiper-slide">
                            <div class="image-slider__image">
                                <img src="img/space-2.jpg" alt="2">
                            </div>
                        </div>
                        <div class="image-slider__slide swiper-slide">
                            <div class="image-slider__image">
                                <img src="img/space-3.jpg" alt="3">
                            </div>
                        </div>
                        <div class="image-slider__slide swiper-slide">
                            <div class="image-slider__image">
                                <img src="img/space-4.jpg" alt="4">
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                    <div class="image-slider__fraction">
                        <div class="image-slider__current"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Answer 1

Тебе не нужно счиать слайды по длине, и вычислять current. У свайпера есть встроенные свойства, такие как realIndex. Если на слайдере включен loop, то опираться нужно именно на realIndex. Также переключение слайдов лучше реализовать встроенными методами.

В твоем случае получить это свойство можно так: const current = swiper.swiper.realIndex;

Answer 2

За что я люблю Swiper, что он поддаётся лёгкой кастомизации под различные задачи и для этого не нужно особо ничего изобретать, автор позаботился об этом и создал отличную документации, а так же позаботился о параметрах, методах и т.п. на все случаи жизни.

const swiper = new Swiper('.swiper', {
  // Optional parameters
  slidesPerView: 3,
  spaceBetween: 30,
  centeredSlides: true,
  loop: true,
  loopedSLides: 3,
  simulateTouch: true,
  grabCursor: true,
  speed: 800,
  pagination: {
    el: '.swiper-pagination',
    type: 'custom',
    renderCustom: function(swiper, current, total) {
      const progress = `<div class="swiper-pagination__progress" style="--pagination-progress: ${Math.floor((current / total) * 100)}%"></div>`
      
      const fraction = `<div class="swiper-pagination__fraction">
        <span class="swiper-pagination__fraction-current">${current}</span>
        <span class="swiper-pagination__fraction-separator">/</span>
        <span class="swiper-pagination__fraction-total">${total}</span>
      </div>`
      
      return progress+fraction;
    }
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  autoplay: {
    delay: 1000,
  }
});

@import url('https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css');

.swiper {
  display: block;
  width: 600px;
  --swiper-theme-color: red;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #ccc;
}

.swiper-pagination {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  position: static;
}

.swiper-pagination__progress {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background-color: #ccc;
  margin-top: 20px;
  position: relative;
}

.swiper-pagination__progress::before {
  content: '';
  display: block;
  width: var(--pagination-progress, 0%);
  border-radius: inherit;
  background-color: var(--swiper-navigation-color, var(--swiper-theme-color));
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.swiper-pagination__fraction {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<div class="swiper">
  <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>
  
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-pagination"></div>
</div>

БЛОГ НА HUSL

Почему при пролистывании Swiper JS назад слайды отображаются неверно?

Ответы (2 шт):