键盘导航 - 轮播引导答案

【问题标题】：Keyboard navigation - carousel bootstrap键盘导航 - 轮播引导
【发布时间】：2021-12-24 20:04:48
【问题描述】：

我使用带有轮播指示器（数字）的 boostrap 轮播。如果我使用键盘导航，轮播可以工作，但指示器不会改变

当我使用键盘进行下一个/上一个时，我希望指示器自动更改。

我的键盘导航 JS：

$(document).bind('keyup', function(e) {
        if(e.which == 39){
            $('.carousel').carousel('next');
        }
        else if(e.which == 37){
            $('.carousel').carousel('prev');
        }
    });

我的轮播代码

<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>

我的指标导航代码：

<?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; ?>

【问题讨论】：

标签： wordpress bootstrap-4 advanced-custom-fields

【解决方案1】：

试试下面的例子。

$(document).bind('keyup', function(e) {
    if(e.which == 39){
        $('.carousel').carousel('next');
    }
    else if(e.which == 37){
        $('.carousel').carousel('prev');
    }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Third slide">
    </div>
  </div>
</div>
<ol class="carousel-indicators desktopnumber">
<li class="single-project-carousel-indicator-item" data-target="#testslide" data-slide-to="1" class="active">1</li>
<li class="single-project-carousel-indicator-item" data-target="#testslide" data-slide-to="2" class="">2</li>
<li class="single-project-carousel-indicator-item" data-target="#testslide" data-slide-to="3" class="">3</li>
</ol>

【讨论】：