引导程序 4：数据键盘 =“真”不工作

Posted 2023-03-21

【中文标题】引导程序 4：数据键盘 =“真”不工作

【英文标题】：Bootstrap 4: data-keyboard="true" not working

【发布时间】：2021-12-06 08:59:11

【问题描述】：

我有一个Bootstrap 4 carousel，我给了这个属性data-keyboard="true"

但是键盘导航不起作用。即使先用鼠标关注轮播本身也不行。

我希望轮播在页面加载时直接使用键盘。

这是我的代码

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

Bootstrap 4 js 库已正确加载...

有什么提示吗？

提前致谢！

【问题讨论】：

能否包含链接或 CDN 以及 Bootstrap CSS、JS 和 jQuery 的版本？另外，data-keyboard="true" 是否可以在没有控件的情况下工作？

【参考方案1】：

我对此不是 100% 确定，但可能是他 data-keyboard 信息需要附加到 carousel-item 而不是 carousel -示例通用？只是想尝试一下。

想了想……

好的，我注意到 GetBootstrap 上的一些不正确的文档。在 Bootstrap 5 中，它是 data-bs-keyboard 而不是 data-keyboard。

值得一试:)

【讨论】：

试过了，没用

编辑并为您添加了另一个建议。

我也试过了，但是因为我使用的是 Bootstrap 4，所以它不起作用