如何将按钮置于carousel-control-next上方及解决按钮点击失效问题

为什么按钮点击会触发carousel-control-next的事件？ #

这是因为Bootstrap的carousel-control-next元素默认是绝对定位的，并且它的交互层级（z-index）比你的暂停按钮更高，导致按钮被这个控件“盖住”了——你看似点击的是按钮，实际上点到了后面的next控件上。

解决方案一：修复按钮的点击事件 #

给暂停按钮添加定位和更高的z-index，确保它在视觉和交互上都能“跑”到carousel-control-next的上方：

#carouselButton {
    position: absolute;
    right: 50px; /* 可根据需求调整和next控件的间距 */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1055; /* Bootstrap默认carousel-control的z-index是1050，这里设更高的值 */
}

解决方案二：把按钮直接放在carousel-control-next上方 #

如果想让按钮叠在next控件的正上方，只需要调整right值和next控件对齐即可：

#carouselButton {
    position: absolute;
    right: 20px; /* 和next控件的位置对齐 */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1055; /* 确保层级高于carousel-control */
}

优化你的JS代码（可选） #

你原来的JS代码可以简化一下，用$(this)代替重复选择#carouselButton，更简洁高效：

$("#carouselButton").click(function(){
    const $icon = $(this).children('span');
    if($icon.hasClass('fa-pause')){
        $("#mycarousel").carousel('pause');
        $icon.removeClass('fa-pause').addClass('fa-play');
    } else {
        $("#mycarousel").carousel('cycle');
        $icon.removeClass('fa-play').addClass('fa-pause');
    }
});

修改后的完整HTML结构 #

把样式整合进去，调整后的代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#carouselButton {
    position: absolute;
    right: 50px; /* 可根据需求调整位置 */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1055;
}
</style>
<div class="container">
    <div class="row row-content">
        <div class="col">
            <div id="mycarousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" role="listbox">
                    <div class="carousel-item active">
                        <p class="d-none d-sm-block">content1</p>
                    </div>
                    <div class="carousel-item">
                        <p class="d-none d-sm-block">content2 </p>
                    </div>
                    <div class="carousel-item">
                        <p class="d-none d-sm-block">content3 </p>
                    </div>
                </div>
                <ol class="carousel-indicators">
                    <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#mycarousel" data-slide-to="1"></li>
                    <li data-target="#mycarousel" data-slide-to="2"></li>
                </ol>
                <!-- 暂停按钮 -->
                <button class="btn btn-danger btn-sm" id="carouselButton">
                    <span class="fa fa-pause"></span>
                </button>
                <a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>
            </div>
        </div>
    </div>
</div>

这样调整后，按钮就能正常响应点击，同时也能放在carousel-control-next的上方啦！

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