Carousel number counter reset

Question

I have created a bootstrap carousel and am now trying to create a number counter that shows the total number of pages and the current page number.

It works fine until the carousel starts again and switches to the first page. Instead of going from "Last slide/Total slides" to "First slide/Total slide" it still showing "Last slide/Total slides" on the first slide. But it resets on the second slide.

Another problem that I think is related to the above is if it counts backwards from the first page to the last page it continues to show "First page/Total slides" until I click the next button.

The link to the page (The first carousel)

/R

My HTML

<div id="nav-01" class="carousel" data-ride="carousel" data-interval="false">           
            
    <div class="carousel-inner noselect">
    <div class="carousel-item active item-01">
        
        <img class="case-img" src="../media.officeofpossibilities.se/public_html/1_Silent_moto_OP_web_Landscape_1920x1080.jpg" alt="Slide 01">
                            
    </div> <!--carousel-item active-->
                            
    <div class="carousel-item item-01">
                            
        <img class="case-img" src="../media.officeofpossibilities.se/public_html/2_OP_silent_moto_Sketch_web_Landscape_1920x1080-Recovered.jpg" alt="Slide 01">
                                                                            
    </div>
                       
    <div class="carousel-item item-01">
                                        
        <img class="case-img" src="../media.officeofpossibilities.se/public_html/4_Diagram_Silent_moto_OP_web_Landscape_1920x1080-1.jpg" alt="Slide 01">
                            
    </div>              
                    
    <div class="carousel-title">    
        <a class="prev-01" href="#nav-01" role="button" data-slide="prev">Back</a>
        <a class="next-01" href="#nav-01" role="button" data-slide="next">Next</a>
    </div>
                            
    <div class="num-01"></div>

    </div>
</div>

JS:

  var totalItems = $('.item-01').length;
            var currentIndex = $('div.carousel-item').index() + 1;

            var down_index;
            $('.num-01').html(''+currentIndex+' / '+totalItems+'');

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

                $(".prev-01").click(function(){
                    down_index=down_index-1;
                if (down_index >= 1 )
                {
                    $('.num-01').html(''+down_index+' / '+totalItems+'');
                }
            });

Answer 1

In your current jquery code as you go to last slide i.e : 3 the currentIndex_active will be 3 and when you click next button again its value become 4 and there is no such slide so if-statement will not get executed and that's the reason no value change .Instead you can add an else part to refresh its values and just show $('.num-01').html('1' + ' / ' + totalItems + ''); and same for back button you can do.

Demo Code :

var totalItems = $('.item-01').length;
var currentIndex = $('div.carousel-item').index() + 1;
var down_index;
$('.num-01').html('' + currentIndex + ' / ' + totalItems + '');
$(".next-01").click(function() {
  currentIndex_active = $('div.carousel-item.active').index() + 2;
  if (totalItems >= currentIndex_active) {
    down_index = $('div.carousel-item.active').index() + 2;
    $('.num-01').html('' + currentIndex_active + ' / ' + totalItems + '');
  } else {
    down_index = 1; //just to make 0 to go to else part when back button is clicked
    $('.num-01').html('1' + ' / ' + totalItems + '');

  }
});

$(".prev-01").click(function() {
  down_index = down_index - 1;
  if (down_index >= 1) {
    $('.num-01').html('' + down_index + ' / ' + totalItems + '');
  } else {
    down_index = totalItems; //last slide value 
    $('.num-01').html('' + totalItems + ' / ' + totalItems + '');
  }
});

img {
  height: 100px;
  width: 100px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div id="nav-01" class="carousel slide" data-ride="carousel" data-interval="false">

  <div class="carousel-inner noselect">
    <div class="carousel-item active item-01">

      <img class="case-img" src="http://placehold.it/1200x600/555/000&text=One" alt="Slide 01">

    </div>
    <!--carousel-item active-->

    <div class="carousel-item item-01">

      <img class="case-img" src="http://placehold.it/1200x600/555/000&text=two" alt="Slide 01">

    </div>

    <div class="carousel-item item-01">

      <img class="case-img" src="http://placehold.it/1200x600/fcf00c/000&text=Three" alt="Slide 01">

    </div>
  </div>
  <div class="carousel-title">
    <a class="prev-01" href="#nav-01" role="button" data-slide="prev">Back</a>
    <a class="next-01" href="#nav-01" role="button" data-slide="next">Next</a>
  </div>

  <div class="num-01"></div>


</div>