Question

我使用Carousel引导程序进行幻灯片放映，我只想点击确切的箭头图标来移动幻灯片，但问题是它可以让你点击箭头附近的任何地方（上方和下方），有什么方法可以我可以调整它只能点击箭头。我做了下面的代码，以删除已经看到阴影的黑暗区域。谢谢

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

Answer 1

只有你必须得到顶部：50％;和底部：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更改为您的carousal ID或类选择器。

Answer 2

您将在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: 0和bottom: 0。基本上，锚元素从其父级的顶部一直延伸到底部（它是position ed absolute ly。）。

此外，它还有width: 15%。

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

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

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

您还可以使用以下内容单独定位两个箭头：

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

删除箭头轮播引导程序附近的可点击区域

2 个答案: