删除箭头轮播附近的可点击区域 bootstrap

remove the clickable area near arrows carousel bootstrap

我使用 Carousel bootstrap 制作幻灯片,我只想点击确切的箭头图标来移动幻灯片,但问题是它可以让你点击箭头附近的任何地方(上方和下方) ,有什么办法可以调整它只能点击箭头。我做了下面的代码来删除已经看起来像阴影的黑暗区域。谢谢

 .carousel-control.left, .carousel-control.right {
   filter: progid: none !important;
   filter:none !important;
   background-image:none;
   outline: 0;
   opacity: 1;
 }

您会在 BootStrap 的锚点元素样式中注意到以下内容:

.carousel-control {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    background-color: rgba(0,0,0,0);
    filter: alpha(opacity=50);
    opacity: .5;
}

这里的关键是top: 0bottom: 0。基本上,锚元素从其父元素的顶部一直延伸到底部(positioned absolutely)。

另外还有width: 15%.

我会使用 .parent .child {} 选择器覆盖 BS 的样式,如下所示:

.yourparentclass .carousel-control {
    top: 100px;
    bottom: 100px;
    width: 5%;
}

这当然是一个示例 - 您需要做一些实验,但它应该会引导您走上正确的轨道。

您也可以使用以下方法分别瞄准两个箭头:

.yourparentclass .carousel-control.right {}
.yourparentclass .carousel-control.left {}

只有你必须放 top:50%; bottom:50%; 问题将得到解决。 :)

对于Bootstrap 3:

#myCarousel .carousel-control{
    top: 50%;
    bottom: 50%;
}

对于Bootstrap 4:

#myCarousel  .carousel-control-prev, 
#myCarousel  .carousel-control-next{
    top: 50%;
    bottom: 50%;
}

并且不要忘记将 #myCarousel id 更改为您的轮播 ID 或 class 选择器。