顯示網頁上的幻燈片數量

Question

我編寫了一個自定義滑塊，如此代碼筆所示：
http://codepen.io/anon/pen/NqQpjG
我添加了額外的功能，可以計算移動的幻燈片總數。 例如，如果總幻燈片為 8，則起始值將如下所示：
Slides: 0/8 。 當一張幻燈片移動時，它變成Slides: 1/8等等。 這是我的代碼：

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

JS

var slide = new slide('.swiper-slide', {
        var totalSlides = 10;
        var newSlide = document.getElementsByClassName('swiper-slide');
        var newValue = newSlide + 1;
        document.getElementById('numberSlides').innerHTML = newValue + "/" + totalSlides + " Slides";
    });   

但它不起作用。 如何顯示移動的幻燈片數量？
編輯：
我的幻燈片在這些divs ：

<div class="swiper-container">
        <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 class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

Answer 1

使用此屬性

  runCallbacksOnInit: true, 
  onInit: function(sw){}, //runs callback in initialization
  onSlideChangeEnd: function(sw){} //runs callback in slide change end

演示

 var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', spaceBetween: 30, centeredSlides: true, autoplay: 3000, autoplayDisableOnInteraction: false, 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'; } });

 #numberSlides{ position: absolute; bottom: 0; left: 0; z-index: 9999; } 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-container { 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; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.2/js/swiper.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.2/css/swiper.css"> <div class="swiper-container"> <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 class="swiper-slide">Slide 10</div> </div> <!-- Add Pagination --> <div class="swiper-pagination swiper-pagination-clickable"></div> <div id="numberSlides"> 0/0 Offers </div> </div>

Answer 2

類型：分數

https://swiperjs.com/api/#pagination

首先，您可以使用type: fraction

pagination: {
  el: '.swiper-pagination',
  type: "fraction"
},

和renderFraction例如：

var swiper = new Swiper('.swiper-container', {
  //...
  renderFraction: function (currentClass, totalClass) {
      return '<span class="' + currentClass + '"></span>' +
              ' of ' +
              '<span class="' + totalClass + '"></span>';
  }
});

swiper 6 和子彈類型自定義

如果你想使用自己的元素。

而不是使用您自己的邏輯/計算total-slides -干凈的解決方案是在paginationRender事件之后獲取swiper-pagination-bullet的總數。

僅適用於項目符號分頁類型。

a.當前幻燈片

使用realIndex + 1 （怎么一回事，因為這是零基索引|| 0 ==第一滑動）0和UPADTE櫃台上slideChange通過innerHTML的屬性。

slideChange: function(){
   var currentSlide = this.realIndex + 1;
   document.querySelector('.current-slide').innerHTML = currentSlide;
},

灣總幻燈片

使用paginationRender （事件將在分頁渲染后觸發）並獲取子彈總數（ document.getElementsByClassName('swiper-pagination-bullet').length ）

 paginationRender: function(){
   var totalSlides = document.getElementsByClassName('swiper-pagination-bullet').length;
   console.log("totalSlides: " + totalSlides);
   document.querySelector('.total-slides').innerHTML = totalSlides;      }

片段

 var swiper = new Swiper('.swiper-container', { loop: true, pagination: { el: '.swiper-pagination', }, /* events */ on: { slideChange: function(){ var currentSlide = this.realIndex + 1; console.log("currentSlide is:" + currentSlide); document.querySelector('.current-slide').innerHTML = currentSlide; }, paginationRender: function(){ var totalSlides = document.getElementsByClassName('swiper-pagination-bullet').length; console.log("totalSlides: " + totalSlides); document.querySelector('.total-slides').innerHTML = totalSlides; } } });

 html, body { position: relative; height: 100%; } .counter{ border: 3px solid red; text-align: center; } strong{ color: red; font-size: 32px; } .swiper-container { width: 100%; height: 100px; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: -webkit-flex; display: flex; justify-content: center; align-items: center; }

 <link rel="stylesheet" href="https://unpkg.com/swiper@6.3.4/swiper-bundle.min.css"> <p class="counter"> <strong class="current-slide">current-slide</strong> of <strong class="total-slides">Total</strong> <p> <!-- Swiper --> <div class="swiper-container"> <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 class="swiper-slide">Slide 10</div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> <script src="https://unpkg.com/swiper@6.3.4/swiper-bundle.min.js"></script>