0

Подскажите, пожалуйста, как исправить мой код, чтобы он считал не количество слайдов, а количество страниц со слайдами. Буду благодарен любому ответу.

//инициализация слайдера
const swiper__products = new Swiper('.choice__slider', {

slidesPerView: 1,
slidesPerGroup: 1,
spaceBetween: 72,

pagination: {
    el: '.aside__progressbar',

    type: 'progressbar'
},

breakpoints: {

    767: {
        slidesPerView: 2,
        slidesPerGroup: 2,
    },
    1200: {
        slidesPerView: 3,
        slidesPerGroup: 3,
    },
}    });



//добавляем 0 перед цифрой
function formatFraction (number) {
    if (number < 10) {
        number = '0' + number;
    }
    return number;
};

// код счетчика слайдов
let mySliderAllSlides = document.querySelector('.aside__total')
let mySliderCurrentSlide = document.querySelector('.aside__current');

mySliderAllSlides.innerHTML = formatFraction(swiper__products.slides.length);

swiper__products.on('slideChange', function() {
    let currentSlide = formatFraction(swiper__products.realIndex + 1);
    mySliderCurrentSlide.innerHTML = currentSlide;
});
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>

<div class="choice__slider">

  <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 class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
  </div>
  <div class="aside__counter">
      <div class="aside__current">01</div>
      <div class="aside__total">05</div>
  </div>
  <div class="aside__progressbar"></div>

</div>

1 ответ 1

1

В документации есть описание

Используем событие init - после инициализации слайдов получаем индекс (в данном случае при выключенном loop можно вместо realIndex использовать index) делим на количество слайдов на экране и получаем индексы 0,1,2... добавляем единицу чтоб индекс начинался с 1 а не 0

Тоже самое делаем и для события slideChange (событие при смене слайдов)

var slidesPerView = 3
var $counter = document.querySelector(".counter")
var swiper = new Swiper(".mySwiper", {
  slidesPerView: slidesPerView,
  spaceBetween: 30,
  slidesPerGroup: slidesPerView,
  loopFillGroupWithBlank: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  on: {
    init: function(){
      $counter.innerHTML = this.realIndex / slidesPerView + 1
    },
    slideChange: function(){
      $counter.innerHTML = this.realIndex / slidesPerView + 1
    }
  }
});
html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

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

.counter {
  width: 50px;
  height: 50px;
  position: fixed;
  left: 10px;
  top: 10px;
  font-size: 50px;
  color: red;
  z-index: 100000;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>

<body>
  <!-- Swiper -->
  <div class="swiper mySwiper">
    <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 class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
  </div>

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

</body>

</html>

3
  • в таком случае мы крепко привязаны к var slidesPerView = 3, а если на адаптиве изменяется количество слайдов для показа/прокрутки, то как быть?
    – PeWe
    13 янв 2022 в 10:31
  • Все в той же документации. Слушать событие breakpoint и делить не на переменную slidesPerView а менять переменную свою и вывести в функцию изменения числа и делить на количество слайдов (ту самую свою переменную). Учтите что если количество слайдов кратно трем но не кратно двум, то нужно будет немного просчеты корректировать так как будет остаток от деления, но если использовать 6, 12, 18 слайдов то не нужно
    – Greg--
    13 янв 2022 в 11:25
  • Я попробовал в сниппете добавить событие breakpoint: function(swiper, breakpointParams){console.log(breakpointParams} и сниппет то работает и вызывает событие breakpoint то вообще не перестраивается (соответственно и событие не вызывается) попробуйте на локальном компьютере, breakpointParams должен вернуть объект {slidesPerView: число, slidesPerGroup: число}, или что то подобное
    – Greg--
    13 янв 2022 в 11:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.