Below my Bootstrap 4 Carousel, I have an indicator saying the current slide number and the total amount of sliders, so 1 of 5, 2 of 5, 3 of 5, etc.
Using the Bootstrap hook, my counter should increment when the next slide is clicked, which it does, but not until two slides have been clicked so it will stay on 1 of 5 for two slides before updating to 2 of 5 and functionally normally, but because it doesn't start, the order is incorrect:
First: 1/5 Second: 1/5 Third: 2/5 Forth: 3/5 Fifth: 4/5 First(again): 5/5
Whereas it should start at 1/5 then on click, go to 2/5, then 3/5 etc according to the actual slide number.
Here is my jQuery code
jQuery(function($) {
var totalItems = $('.carousel-item').length;
var currentIndex = $('div.active').index() + 1;
$('#carousel-number').html('<p>'+currentIndex+' of '+totalItems+'</p>');
$('#brands-carousel').on('slide.bs.carousel', function () {
currentIndex = $('div.active').index() + 1;
$('#carousel-number').html('<p>'+currentIndex+' of '+totalItems+'</p>');
});
});
I added + 1 to the index as it started at 0. (0 of 5 instead of being 1 of 5)
And my HTML / PHP Carousel
<?php
if( have_posts() ) :
$count = 0;
$counti = 0;
$content = apply_filters( 'the_content', get_the_content() );
?>
<div class="brands-carousel">
<div id="brands-carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-navigation">
<ol class="carousel-indicators" id="carousel-indicators">
<?php
while( have_posts()) : the_post(); ?>
<li id="carousel-number" data-target="#brands-carousel" data-slide-to="<?php echo $counti; ?>" class="<?php echo ($counti == 0 ? 'active' : 'hide'); ?>">
</li>
<?php
endwhile;
?>
</ol>
<a class="carousel-control-prev" data-target="#brands-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" data-target="#brands-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="carousel-inner" role="listbox">
<?php
while(have_posts()) : the_post();
?>
<div class="carousel-item <?php echo ($count == 0 ? 'active' : '') ?>">
<div id="content">
<div class="row different-row">
<div class="col-6 the-difference">
<h1>The Difference</h1>
<p><?php the_title(); ?></p>
</div>
<div class="col-6 the-benefit">
<h1>The benefit to you</h1>
<div class="benefit-wrap">
<?php echo apply_filters( 'the_content', get_the_content() ); ?>
</div>
</div>
</div>
</div>
</div>
<?php
$count++;
endwhile;
?>
</div>
</div>
</div>
<?php
endif;
?>
Any help would be greatly appreciated
