[英]Removing arrows in Bootstrap Carousel
here is the homepage of my blog www.lowcoupling.com I'd like not show the left and right arrows in the bootstrap carousel I have tried这是我博客的主页 www.lowcoupling.com 我不想在我尝试过的引导程序轮播中显示左右箭头
.glyphicon-chevron-right{
display:none;
}
(and the same thing for the left arrow) but it does not seem to work. (和左箭头相同)但它似乎不起作用。
This will hide the buttons这将隐藏按钮
.right.carousel-control, .left.carousel-control {
display: none;
}
If you still want to be able to click where the button is drawn, do:如果您仍然希望能够单击绘制按钮的位置,请执行以下操作:
.right.carousel-control, .left.carousel-control {
opacity: 0;
filter:alpha(opacity=0); /* IE support */
}
I took a quick gander, and you are almost there, but Bootstrap's css is taking precidence over your css.我快速浏览了一下,您就快到了,但是 Bootstrap 的 css 优先于您的 css。 Bootstrap has: Bootstrap 具有:
.carousel-control .glyphicon-chevron-right{
...
display:inline-block;
}
If you were to assign an arbitrary point value to this, Bootstrap is providing '2 points' to provide the style 'inline-block'.如果您要为此分配任意点值,Bootstrap 将提供“2 点”以提供样式“inline-block”。
Because your css is loaded after Bootstrap, simply putting an extra class (and matching Bootstrap's 2 points) before ".glyphicon-chevron-right" should do the trick.因为您的 css 是在 Bootstrap 之后加载的,所以只需在“.glyphicon-chevron-right”之前添加一个额外的类(并匹配 Bootstrap 的 2 点)就可以了。
.carousel .glyphicon-chevron-right{display:none;}
Or, if you want your override to be "stronger", putting an id in front gives your override a higher value (approx 256)或者,如果您希望您的覆盖“更强”,则在前面放置一个 id 会使您的覆盖获得更高的值(大约 256)
#myCarousel .glyphicon-chevron-right{display:none;}
This will work,这将工作,
.right.carousel-control,
.left.carousel-control
{
visibility:hidden;
}
there is simple solve for that problem.有一个简单的解决方案。 Just remove "a" tags and with into span tags只需删除“a”标签并使用span标签
before之前
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
after solved解决后
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
that's it就是这样
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.