renderbullet не работает в swiper слайдере (2022), цифры не выводятся

Question

1.Мне нужно вывести цифры, соответствующие номеру слайда, в маркерах, как на первом скриншоте - это то, чего я хочу добиться. 2. второй скрин - это то, что я получаю. 3. версия 8.2.6 . Я пробовал другие версии, вплоть до 6.0.0 - проблема не исчезла, так что это не версия swiper. 4. Я перепроверил все синтаксически, все правильно. 5. Я попытался полностью удалить свой пользовательский css - ситуация не меняется. 6. В остальном пагинация у меня работает нормально. 7. Я не понимаю, в чём ещё может быть дело, я был бы очень благодарен, если бы кто-нибудь помог. 8. Код приклепляю.

Js:

const swiper = new Swiper('.swiper', {

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  pagination: {
    el: '.swiper-pagination',

    clickable: true,

    dynamicBullets: true,

    renderBullet: function(index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
    },
  },

});

Css:

.Swiper {
  width: 550px;
  height: 300px;
}

.Swiper-Wrapper {}

.Swiper-SlideInner {
  text-align: center
}

.Swiper-SlideImg {
  max-width: 100%;
}

.Swiper .Swiper-Button_prev::after,
.Swiper .Swiper-Button_next::after {
  color: white;
}

.Swiper-Pagination {
  bottom: 18px
}

.Swiper .swiper-pagination-bullet {
  background-color: #fff;
  opacity: 0, 9;
  width: 8px;
  height: 8px;
}

.Swiper .swiper-pagination-bullet-active {
  background-color: white;
  width: 8px;
  height: 8px;
  transition: all 0.4s
}

html:

<div class="Swiper swiper">
  <div class="Swiper-Wrapper swiper-wrapper">
    <div class="Swiper-SlideItem swiper-slide">
      <div class="Swiper-SlideInner">
        <img class="Swiper-SlideImg" src="img/img1.jpg" alt="">
      </div>
    </div>
    <div class="Swiper-SlideItem swiper-slide">
      <div class="Swiper-SlideInner">
        <img class="Swiper-SlideImg" src="img/img2.jpg" alt="">
      </div>
    </div>
    <div class="Swiper-SlideItem swiper-slide">
      <div class="Swiper-SlideInner">
        <img class="Swiper-SlideImg" src="img/img3.jpg" alt="">
      </div>
    </div>
    <div class="Swiper-SlideItem swiper-slide">
      <div class="Swiper-SlideInner">
        <img class="Swiper-SlideImg" src="img/img4.jpg" alt="">
      </div>
    </div>
    <div class="Swiper-SlideItem swiper-slide">
      <div class="Swiper-SlideInner">
        <img class="Swiper-SlideImg" src="img/img5.jpg" alt="">
      </div>
    </div>
  </div>
  <div class="Swiper-Pagination swiper-pagination"></div>
  <div class="Swiper-Button_prev swiper-button-prev"></div>
  <div class="Swiper-Button_next swiper-button-next"></div>

</div>

БЛОГ НА HUSL

renderbullet не работает в swiper слайдере (2022), цифры не выводятся

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