删除箭头轮播附近的可点击区域 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: 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 {}
只有你必须放 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 选择器。
我使用 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: 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 {}
只有你必须放 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 选择器。