javascript - Swiper js slides counter

Can anyone please help? I need a slide counter for my swiper js carousel, but this counter doesn't work: /?template=wvzKBdW

For example, if total slides are 8, then starting value would be like this: Slides: 0/8. When one slide moves, it bees Slides: 1/8 and so on.

I found this example Showing number of slides on the web page , but it works with older version of swiper js and I can't find a way to do it with swiper js latest version. In my codepen there is the version I need.

Thanks!

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

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

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
  runCallbacksOnInit: true,
  onInit: function(sw){
    var offer = document.querySelector('#numberSlides');
    offer.innerHTML = (sw.activeIndex +  1) + '/' + sw.slides.length + 'Offers';
  },
  onSlideChangeEnd: function(sw){
    var offer = document.querySelector('#numberSlides');
    offer.innerHTML = (sw.activeIndex +  1) + '/' + sw.slides.length + 'Offers';
  }
})

.swiper-container {
    width: 600px;
    height: 300px;
}

#numberSlides{
  position: absolute; 
  bottom: 0;
  left: 0;
  z-index: 9999;
}

<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".min.css">

<script src=".js"></script>
<script src=".min.js"></script>

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div id="numberSlides">
      0/0 Offers
    </div>
</div>

Can anyone please help? I need a slide counter for my swiper js carousel, but this counter doesn't work: https://codepen.io/pen/?template=wvzKBdW

For example, if total slides are 8, then starting value would be like this: Slides: 0/8. When one slide moves, it bees Slides: 1/8 and so on.

Thanks!

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

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

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
  runCallbacksOnInit: true,
  onInit: function(sw){
    var offer = document.querySelector('#numberSlides');
    offer.innerHTML = (sw.activeIndex +  1) + '/' + sw.slides.length + 'Offers';
  },
  onSlideChangeEnd: function(sw){
    var offer = document.querySelector('#numberSlides');
    offer.innerHTML = (sw.activeIndex +  1) + '/' + sw.slides.length + 'Offers';
  }
})

.swiper-container {
    width: 600px;
    height: 300px;
}

#numberSlides{
  position: absolute; 
  bottom: 0;
  left: 0;
  z-index: 9999;
}

<link rel="stylesheet" href="https://unpkg./swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg./swiper/swiper-bundle.min.css">

<script src="https://unpkg./swiper/swiper-bundle.js"></script>
<script src="https://unpkg./swiper/swiper-bundle.min.js"></script>

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div id="numberSlides">
      0/0 Offers
    </div>
</div>

Share Improve this question asked Dec 1, 2020 at 23:02 Kate 111 gold badge1 silver badge2 bronze badges

Scroll to my answer here: stackoverflow./questions/32196177/…. Swiper 6 example. stackoverflow./a/64593568/9291557 – Ezra Siton Commented Dec 2, 2020 at 10:33

Add a ment |

4 Answers 4

Sorted by: Reset to default 1

for now in the Swiper.js exist fn pagination type:fraction, Example:

HTML(pug)
.swiper-container
  .swiper-wrapper
    ... slides
  .swiper-pagination

JS:
const swiper = new Swiper('.swiper-container', {
  pagination: {
    el: ".swiper-pagination",
    type: "fraction",
  },
});

It's kind of a hack... But here you go...

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  loop: true,
  initialSlide: 0,
  watchSlidesProgress: true,
  watchSlidesVisibility: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

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

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  }
})

function change(){
  var offer = document.getElementById('numberSlides');
  offer.innerHTML = (mySwiper.realIndex +  1) + '/' + (mySwiper.slides.length - 2)+ 'Offers';
}

change();
document.getElementById("prev").addEventListener("click", change);
document.getElementById("next").addEventListener("click", change);

.swiper-container {
    width: 600px;
    height: 300px;
}

#numberSlides{
  position: absolute; 
  bottom: 0;
  left: 0;
  z-index: 9999;
}

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - A Pen by Peter K Joseph</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<link rel="stylesheet" href="https://unpkg./swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg./swiper/swiper-bundle.min.css">

<script src="https://unpkg./swiper/swiper-bundle.js"></script>

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div id="prev" class="swiper-button-prev"></div>
    <div id="next" class="swiper-button-next"></div>

    <div id="numberSlides">
      0/0 Offers
    </div>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

EDIT:

I think it will be more helpful to your to use your full code, rather than just a snippet.

Here you go:

var slides_count = document.getElementsByClassName("swiper-slide"); // <- add this
var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

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

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
  runCallbacksOnInit: true,
  // === new change
  on: {
    slideChange: function(){
        var offer = document.querySelector('#numberSlides');
        offer.innerHTML = (this.activeIndex +  1) + '/' + slides_count.length + 'Offers';
    }
  }
})

If you use an endless loop slider, you need to deduct the duplicated slides from your total number.

var slides_count = document.getElementsByClassName("swiper-slide"); 
var slides_count_dup = document.getElementsByClassName("swiper-slide-duplicate");

total.innerHTML = (swiper.realIndex +  1) + ' / ' + (slides_count.length - slides_count_dup.length);

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Swiper js slides counter - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)