Первый отсчет слайдов не работает при нажатии на следующую кнопку для Bootstrap 4 Carousel

Question

Я пытаюсь получить общее количество слайдов и заставить его работать как-то.Однако, когда я нажимаю next и он возвращается к исходному первому слайду, он не показывает 1/4, но остается 4/4.

JSFiddel: https://jsfiddle.net/zorw7yLe/

HTML:

<div class="num"></div>
<a class="next" href="#carouselExampleIndicators" role="button" data-slide="next"> -->>></a>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item item active">
      <img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="First slide">
      <div class="carousel-caption">
        <h5>Title of the first image</h5>
        <p>Some description of the first image</p>
      </div>
    </div>
    <div class="carousel-item item">
      <img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Second slide">
      <div class="carousel-caption">
        <h5>Title of the second image</h5>
        <p>Some description for the second image</p>
      </div>
    </div>
    <div class="carousel-item item">
      <img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Third slide">
      <div class="carousel-caption">
        <h5>Title of the third image</h5>
        <p>Some description for the third image</p>
      </div>
    </div>
    <div class="carousel-item item">
      <img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Fourth slide">
      <div class="carousel-caption">
        <h5>Title of the fourth image</h5>
        <p>Some description for the fourth image</p>
      </div>
    </div>
  </div>
</div>

JS:

var totalItems = $('.carousel-item').length;
var currentIndex = $('.carousel-item.active').index() + 1;
var down_index;
$('.num').html(''+currentIndex+'/'+totalItems+'');

    $(".next").click(function(){
    currentIndex_active = $('.carousel-item.active').index() + 2;
    if (totalItems >= currentIndex_active)
    {
        down_index= $('.carousel-item.active').index() + 2;
        $('.num').html(''+currentIndex_active+'/'+totalItems+'');
    }
});

Answer 1

Я предлагаю вам использовать события начальной загрузки карусели, вам не нужно смотреть клик непосредственно по вашей ссылке:

https://getbootstrap.com/docs/4.0/components/carousel/#events

var totalItems = $('.carousel-item').length; 

$('#carouselExampleIndicators').on('slide.bs.carousel', function (e) {
    $('.num').html((e.to+1)+'/'+totalItems);
});

Таким образом, ваш счетчик будет отслеживатьтекущий слайд

Кроме того, ваш счетчик не возвращается к 1/4 из-за вашего состояния (totalItems> = currentIndex_active), на последнем слайде, если вы добавите +2 к индексу, это 5, чтобольше, чем totalItems (4)

Вам понадобится другое, чтобы в итоге получить правильный номер, но просто используйте события начальной загрузки