Сделайте ползунок, подсчитайте количество слайдов в слайдере

Я сделал слайдер jQuery для веб-сайта, у него есть 9 слайдов, и я хочу, чтобы счетчик подсчитывал JUST до 9. Что происходит, так это то, что как только я доберусь до последнего слайда (09 из 09) и CLICK на NEXT bnt, он идет на первый слайд (01 из 09), и когда я нажимаю, чтобы перейти ко второму слайду, я получаю это: 11 из 09. Пожалуйста, помогите!

Это бесконечный слайдер, и он хотел бы, чтобы счетчик работал над «UP» и «DOWN», что означает, что счетчик добавляется, если пользователь переходит в 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);

javascript,jquery,css,slider,counter,

0

Ответов: 2

0 принят

Попробуйте использовать этот единственный счетчик e, инициализированный 1

 ....
 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);
     ....
   }
0

Используйте Оператор напоминания. %Здесь вы:

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логики, но если все это ясно, вы можете просто использовать этот фрагмент и перенести его в любую текущую или будущую галерею, которую вы создаете:

// Logic to loop counter on prev / next click:
c = (this.id==="next" ? ++c : --c) < 0 ? tot-1 : c%tot;
JavaScript, JQuery, CSS, слайдер, счетчик,
Похожие вопросы
Яндекс.Метрика