Home>

Please tell me how to fix my code so that it does not count the number of slides, but the number of pages with slides. Any answer would be grateful.

//slider initialization
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,
    },
}});
//add 0 before the digit
function formatFraction (number) {
    if (number <
 10) {
        number= '0' + number;
    }
    return number;
};
//slide counter code
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/[email protected]/swiper-bundle.min.js" >
<
/script >
<
link
  rel= "stylesheet"
  href= "https://unpkg.com/[email protected]/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 >