Is it somehow possible to activate the keyboard navigation on a Bootstrap 4 carousel directly on page load and not just after focusing on the navigation arrows?
Right now I have the following (working) carousel. The keyboard navigation works properly but just after focusing on the carousel's arrows. What I would like is to activate this directly on page load.
<?php if( have_rows('images') ): ?>
<!-- The carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000" data-pause="hover" data-keyboard="true">
<!-- Indicators -->
<ul class="carousel-indicators">
<?php
$active = 'active';
$num = 0;
while ( have_rows('images') ) : the_row();
$image = get_sub_field('image');
if($image == "" ) continue;
?>
<li data-target="#myCarousel" data-slide-to="<?php echo $num ?>" class="<?php echo $active ?>"></li>
<?php
$active = '';
$num += 1;
endwhile; ?>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<?php
$active = 'active';
while ( have_rows('images') ) : the_row();
$image = get_sub_field('image');
if($image == "" ) continue;
?>
<div class="carousel-item <?php echo $active ?> screen08">
<div class="container">
<img src="<?php echo get_template_directory_uri(); ?>/files/images/<?php the_sub_field('image'); ?>" class="img-fluid is-slider-item" />
</div>
</div><!-- /item -->
<?php $active = '';
endwhile;
?> </div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<?php endif; ?>
Many thanks in advance for your hints!