Блог

Главная - Вопросы по программированию - Как сделать так, чтобы Swiper JS отображал разбивку на страницы фракций и индикатор выполнения одновременно?

Как сделать так, чтобы Swiper JS отображал разбивку на страницы фракций и индикатор выполнения одновременно?

#javascript #html #jquery #css #swiper.js

Вопрос:

Как сделать так, чтобы индикатор выполнения со строкой выполнения и числовое отображение активного слайда из общего количества слайдов отображались одновременно?

Поскольку по умолчанию одновременная работа индикатора выполнения и разбиения на страницы с дробью невозможна, я добавил «введите:» панель прогресса «» в свойствах «разбиение на страницы», и для числового отображения слайдов я сделал .image-slider__блок дробей, в который я поместил все элементы. Затем я написал код java-скрипта, который я нашел в Интернете, но я получаю ошибку «Ошибка при обнаружении ссылки: myImageSLider не определен». Почему?

Сайт ilyin1ib.beget.tech

Код https://jsfiddle.net/qav8z7f3/

введите описание изображения здесь

 let mySliderAllSlides = document.querySelector('.image-slider__total');
    let mySliderCurrentSlide = document.querySelector('.image-slider__current');
 
    mySliderAllSlides.innerHTML = myImageSLider.slides.length;
 
    myImageSLider.on('slideChange',  function() {
        let currentSlide =   myImageSLider.realIndex;
        mySliderCurrentSlide.innerHTML = currentSlide;
    }); 
 <div class="image-slider__fraction">
                        <div class="image-slider__current">1</div>
                        <div class="image-slider__sepparator">/</div>
                        <div class="image-slider__total">1</div>
</div>

Ответ №1:

используйте slideChange event . Сценарий не дает фактического количества элементов, потому что вы использовали цикл внутри слайдера. Вот почему я нашел значение элементов перед созданием скрипта слайдера.

 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,
  }
});
//var count = $('.image-slider .image-slider__slide').length;


swiper.on('slideChange', function() {
  var fragment = document.querySelector('.image-slider__current');
  var current = swiper.realIndex   1;
  if (current > totalSlide)
    current = 1;
  var idx = current < 10 ? ("0"   current) : current;
  var tdx = totalSlide < 10 ? ("0"   totalSlide) : totalSlide;
  fragment.innerHTML = (idx   '/'   tdx);
});

демонстрация в jsfiddle

Комментарии:

1. По какой-то причине у меня отображается больше слайдов, а их всего 4, и они должны отображаться 1/4, 2/4, 3/4 и 4/4 . Я прикрепил ссылку с картинкой, на которой это показано ibb.co/8Y8cJKj

2. Я не понимаю, что вы имеете в виду. Вы должны правильно настроить ползунок.

3. Что здесь непонятного? Когда я вставил ваш код, в моей разбивке на страницы с дробью количество слайдов отображается больше, чем на самом деле, а именно 6/10 и т. Д. О настройках — Swiper JS настроен правильно

4. да, это работает, но появилась еще одна проблема: когда слайды были сдвинуты в обратном порядке, по какой-то причине слайд, который был третьим в разбивке на страницы с дробью, отображается как 1 или 2 и то же самое с другими слайдами. На картинке, которую я прикрепил, этот слайд первый, и при прокрутке назад он отображает 3. ltdfoto.ru/image/EOHVFG

5. Я изменил код. Я использовал swiper.realIndex, он работает правильно.

Метки: ,