I use boostrap carousel with carousel indicator (number). If i use the keyboard nav, the carousel works but the indicator doesn't change
And i would like the indicator automaticly change when i use my keyboard for next/prev.
My keyboard nav JS :
$(document).bind('keyup', function(e) {
if(e.which == 39){
$('.carousel').carousel('next');
}
else if(e.which == 37){
$('.carousel').carousel('prev');
}
});
My carousel code
<div id="testslide" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<?php if ( have_rows( 'galerie_de_photo' ) ) : ?>
<?php $count = 0; while ( have_rows('galerie_de_photo') ) : the_row(); ?>
<div class="carousel-item <?php if ($count == 0) { ?>active<?php } ?>">
<?php $visuel = get_sub_field( 'visuel' ); ?>
<?php if ( $visuel ) { ?>
<img src="<?php echo $visuel['url']; ?>" alt="<?php the_field( 'texte_alternatif' ); ?>" />
<?php } ?>
</div>
<?php
$count++;
endwhile; ?>
<?php endif; ?>
</div>
</div>
My indicator nav code :
<?php if ( have_rows( 'galerie_de_photo' ) ) : ?>
<ol class="carousel-indicators desktopnumber">
<?php
$count = 0;
while ( have_rows('galerie_de_photo') ) : the_row();
?>
<li class="single-project-carousel-indicator-item" data-target="#testslide" data-slide-to="<?php echo $count; ?>" class="<?php if ($count == 0) { ?>active<?php } ?>"><?php echo $count + 1; ?></li>
<?php
$count++;
endwhile;
?>
</ol>
<?php endif; ?>