制作滑块计数器，只计算滑块中的幻灯片数量

Question

我为一个网站制作了一个 jQuery 滑块，它有 9 张幻灯片，我希望计数器一直计数到 9。当我到达最后一张幻灯片（09 中的 09）并单击NEXT bnt，它转到第一张幻灯片（09 的 01），当我单击转到第二张幻灯片时，我得到：09 的 11。请帮忙！

它是一个无限滑块，并且希望计数器“向上”和“向下”工作，这意味着如果用户进入 NEXT，则计数器添加，如果用户进入前一个，则减去。

滑块在本站http://madebymorro.com/web_dev_vavilco/ 在最底层。

谢谢！

我的代码是 HTML：

<section id="construction">
<div class="wrapper">
  <div id="home-slider">
    <div id="slider-data">
      <div class="count">
        <span class="current">1</span>/09
      </div>
      <div class="slider-nav">
        <div class="prev"><img src="images/home-prev.svg" alt=""></div>
        <div class="next"><img src="images/home-next.svg" alt=""></div>
      </div>
    </div>
    <div id="home-slider-c">
      <section class="slider-project">
        <img src="images/home-slider001.jpg" alt="">
        <div class="img-data">
          <p>zaragoza</p>
          <p>apartamentos</p>
        </div>
      </section>
      <section class="slider-project">
        <img src="images/home-slider002.jpg" alt="">
        <div class="img-data">
          <p>bravtevilla</p>
          <p>casas</p>
        </div>
      </section>
      <section class="slider-project">
        <img src="images/home-slider003.jpg" alt="">
        <div class="img-data">
          <p>business Center Dorado</p>
          <p>oficinas</p>
        </div>
      </section>
      <section class="slider-project">
        <img src="images/home-slider004.jpg" alt="">
        <div class="img-data">
          <p>balcones de la trinidad</p>
          <p>apartamentos</p>
        </div>
      </section>
      <section class="slider-project">
        <img src="images/home-slider005.jpg" alt="">
        <div class="img-data">
          <p>gratamira 131</p>
          <p>apartamentos</p>
        </div>
      </section>
      <section class="slider-project">
        <img src="images/home-slider006.jpg" alt="">
        <div class="img-data">
          <p>torre olaya plaza</p>
          <p>apartamentos y plaza comercial</p>
        </div>
      </section>
      <section class="slider-project">
        <img src="images/home-slider007.jpg" alt="">
        <div class="img-data">
          <p>torre olaya plaza</p>
          <p>locales comerciales</p>
        </div>
      </section>
      <section class="slider-project">
        <img src="images/home-slider008.jpg" alt="">
        <div class="img-data">
          <p>plaza castilla</p>
          <p>apartamentos</p>
        </div>
      </section>
      <section class="slider-project">
        <img src="images/home-slider009.jpg" alt="">
        <div class="img-data">
          <p>sauses del country</p>
          <p>apartamentos</p>
        </div>
      </section>
    </div>
  </div>
</div>

我的代码是 jQuery：

var slider = $('#home-slider-c'),
  next = $('.slider-nav .next'),
  prev = $('.slider-nav .prev');

$('#home-slider-c section:last-child').insertBefore('#home-slider-c section:first-child');
  slider.css('margin-left', '-100%');

  var n = 0;
  function getNext() {
    var e = n === $('.slider-project').length - 1 ? 0 : n + 1;
    $(".current").html(e + 1);
    n++;
    console.log(e);
    slider.animate({
      marginLeft: '-200%'
    }, 700, function() {
      $('#home-slider-c section:first-child').insertAfter('#home-slider-c section:last-child');
      slider.css('margin-left', '-100%');
    });
    // $(".current").html(e++);
  }
  var n = 0;
  function getPrev() {
    var e = n <= 0 ? $('.slider-project').length - 1 : n - 1;
    $(".current").html(e + 1);
    n--;
    console.log(e);
    slider.animate({
      marginLeft: 0
    }, 700, function() {
      $('#home-slider-c section:last-child').insertBefore('#home-slider-c section:first-child');
      slider.css('margin-left', '-100%');
    });
  }

next.on('click', getNext);
prev.on('click', getPrev);

Answer 1

尝试使用初始化为 1 的单个计数器 e

 ....
 var e= 1;
 function getNext() {
    e=  e<$('.slider-project').length?e:0;
    e++;
    $(".current").html(e);
    // n++;
     console.log(e);
  ....
   }
function getPrev() {
   e=  e<=1?$('.slider-project').length+1:e;
   e--;
   $(".current").html(e);
   //  n--;
    console.log(e);
     ....
   }

Answer 2

使用提醒运算符% 来：

var tot = 6,    // Let's say we have 6 slides.
    c = 0;      // Dummy counter

$("#prev, #next").on("click", function(){
  
  // Increment or decrement counter depending on button ID
  c = this.id==="next" ? ++c : --c; 
  
  // OK almost there, now let's loop our counter to prevent exceeding <0 or >5 
  // >5 since index 5 is the 6th slide (tot-1).
  // If counter went less than 0 (prev button) than set it to tot-1
  // For all other cases use modulo % which will reset it to 0 automagically.
  c = c<0 ? tot-1 : c%tot;
  
  $("#test").text(c);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id=prev>&laquo;</button>
<span id=test>0</span>
<button id=next>&raquo;</button>

以上内容可以使用更大的if else 逻辑编写，但如果一切都清楚，您可以简单地使用此 sn-p 并将其放入您当前或未来构建的任何图库中：

// Logic to loop counter on prev / next click:
c = (this.id==="next" ? ++c : --c) < 0 ? tot-1 : c%tot;