Bootstrap 4 carousel: keyboard navigation

I Need Help
1

Hi there :slight_smile:

So I have a Bootstrap 4 Carousel and I would like to make it work also with the keyboard.

Reading the Boostrap 4 documentation I saw it needs a specific attribute data-keyboard="true"

However when adding this to the code is not working. I mean the carousel works but only with mouse

Any hint?

2

Where did you add it? Without trying, I believe it should be added as a custom attribute to the carousel.

3

As I am developing a Wordpress theme with blocs I needed to use custom code and did not used the Carousel Brick

So I coded the carousel my self.

Here the code

<?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">
                <!-- 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; ?>
4

That looks correct, I assume your making the carousel the focus before trying the keys. The only other thing that comes to mind… are you also initialising it with JavaScript?

5

@PeteSharp it does not work also when on focus. Actually I want the carousel to work with keyboard also when NOT in focus, so on page load.

By the way I assume I am initialising JS as other Bootstrap elements work as usual. How can I prove is being initialised? And, as my project is based on Bootstrap 4, do I need to add again JS?

I see no error in the Chrome console btw …