Bootstrap 4中data-keyboard="true"属性无法生效的问题排查

Hey there, let's tackle this keyboard navigation issue with your Bootstrap 4 carousel. I've run into this exact problem before—here's what's going on and how to fix it:

Why It's Not Working #

Bootstrap 4's carousel relies on the container element having focus to listen for keyboard events. By default, <div> elements aren't natively focusable, so even with data-keyboard="true" set, clicking the carousel won't give it focus, and it won't auto-focus on page load. That's why your keyboard controls are unresponsive.

Step-by-Step Fixes #

1. Make the Carousel Container Focusable #

Add the tabindex="0" attribute to your main carousel <div>—this turns it into a focusable element. Update your carousel's opening tag like this:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-keyboard="true" tabindex="0">

2. Auto-Focus the Carousel on Page Load #

To let users control the carousel immediately after page load, add a small JavaScript snippet to force focus on the carousel once the DOM is ready. You can use either vanilla JS or jQuery (since Bootstrap 4 relies on jQuery):

Vanilla JavaScript Version

document.addEventListener('DOMContentLoaded', function() {
  const carousel = document.getElementById('carousel-example-generic');
  if (carousel) {
    carousel.focus();
  }
});

jQuery Version (if you're using it with Bootstrap)

$(document).ready(function() {
  $('#carousel-example-generic').focus();
});

3. Optional: Re-Focus on Carousel Click (Better UX) #

If users click away from the carousel and want to resume keyboard control, add a click listener to re-focus the container:

// Vanilla JS
carousel.addEventListener('click', function() {
  this.focus();
});

// jQuery
$('#carousel-example-generic').on('click', function() {
  $(this).focus();
});

Modified Full Code Snippet #

Here's how your updated PHP/HTML will look with the tabindex added:

<?php if( have_rows('photos') ): ?>
<div class="carousel_bg">
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-keyboard="true" tabindex="0">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php $active = 'active'; $num = 0; while ( have_rows('photos') ) : the_row(); $photo = get_sub_field('photo'); if($photo == "" ) continue; ?>
<li data-target="#carousel-example-generic" data-slide-to="<?php echo $num ?>" class="<?php echo $active ?>"></li>
<?php $active = ''; $num += 1; endwhile; ?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php $active = 'active'; while ( have_rows('photos') ) : the_row(); $photo = get_sub_field('photo'); if($photo == "" ) continue; ?>
<div class="carousel-item <?php echo $active ?> screen08">
<div class="container">
<img src="<?php echo get_template_directory_uri(); ?>/files/photos/<?php the_sub_field('photo'); ?>" class="img-fluid is-slider-item" />
</div>
</div><!-- /item -->
<?php $active = ''; endwhile; ?>
</div>
</div>
</div>
</div><!-- /row -->
<?php endif; ?>

Verify the Fix #

After making these changes:

• The carousel will auto-focus when the page loads, so left/right arrow keys should work immediately
• Clicking the carousel will re-focus it if you've navigated away
• The tabindex="0" ensures the element can receive focus natively

内容的提问来源于stack exchange，提问作者SilberArt