CSS Twitter Bootstrap 轮播 - 不能改变侧箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21422255/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap carousel - can't change side arrows
提问by HerrimanCoder
I have a Twitter bootstrap carousel working pretty well on my web page, but I can't get the side arrows to behave the way I want. My CSS knowledge is maybe a 5 out of 10.
我有一个 Twitter 引导轮播在我的网页上运行良好，但我无法让侧箭头按照我想要的方式运行。我的 CSS 知识可能是 10 分中的 5 分。
Currently the "glyph" arrows are absolute positioned from the left and right edges of the window. As I shrink or grow the window, those arrows stay exactly the same distance from the window edges. Which is weird and wrong because they move all over the place on top of the carousel images. I want them to stay in fixed position on the carousel image, not on the browser window. Also I need to change the font glyphs to transparent images.
目前，“字形”箭头绝对定位在窗口的左右边缘。当我缩小或扩大窗口时，这些箭头与窗口边缘的距离完全相同。这是奇怪和错误的，因为它们在轮播图像上到处移动。我希望它们保持在轮播图像上的固定位置，而不是在浏览器窗口上。另外我需要将字体字形更改为透明图像。
The arrows on the left and right scroll the carousel when clicked. They are not images, they're glyphs, which I guess is some kind of weird font. Here's the HTML:
单击时，左右箭头会滚动轮播。它们不是图像，而是字形，我想这是某种奇怪的字体。这是 HTML：
<a href="#myCarousel" class="left carousel-control" data-slide="prev" style="width:0px"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a href="#myCarousel" class="right carousel-control" data-slide="next" style="width:0px"><span class="glyphicon glyphicon-chevron-right"></span></a>
Here is the css for the href:
这是href的css：
.carousel-control {
background: #343432;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15%;
font-size: 20px;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
And here is the css for the inner span:
这是内部跨度的css：
.glyphicon-chevron-right {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}
And:
和：
.glyphicon {
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}
Though it doesn't show in the raw html, when looking through Chrome dev toolbar inspector, inside the span I see this:
虽然它没有显示在原始 html 中，但在浏览 Chrome 开发工具栏检查器时，在跨度内我看到了这个：
::before
So I need to know how to change the arrow positions to stay fixed relative to the carousel images, not the browser window. And I need to change the glyphs to some transparent arrows that I have.
所以我需要知道如何更改箭头位置以相对于轮播图像而不是浏览器窗口保持固定。我需要将字形更改为我拥有的一些透明箭头。
Here is the actual web page in case you want to inspect any elements: http://www.zerogravpro.com/temp/bootstrap/
如果您想检查任何元素，这里是实际的网页：http: //www.zerogravpro.com/temp/bootstrap/
Thanks.
谢谢。
回答by DaniP
I have made a copy of your code in JSFIDDLEto recreate the problem.
我在JSFIDDLE 中复制了您的代码以重现该问题。
You have an structure like this:
你有这样的结构：
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner"></div>
<a href="#myCarousel" class="left carousel-control"></a>
<a href="#myCarousel" class="right carousel-control"></a>
</div>
Where the atags are the navigation arrows and are positioned absolutein relation to his container #myCarousel. The actual position of the spans inside makes the arrow away from the edge.
其中a标签是导航箭头，并absolute相对于他的容器定位#myCarousel。内部跨度的实际位置使箭头远离边缘。
Since the container #myCarouselis always resized with the screen then the arrows are always visible and can be at the limits with this:
由于容器#myCarousel始终随屏幕调整大小，因此箭头始终可见，并且可以通过以下方式达到限制：
First remove the style inline for the
atags:<a href="#myCarousel" class="left" ... /*style="width:0px" Remove this*/>Then Add this on your CSS:
.carousel-control { top:50%; width:auto; height:1em; background:transparent; } .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { position:static; display:block; width:auto; } .carousel-control .glyphicon-chevron-left:before { margin-left:0; }
首先删除
a标签的内联样式：<a href="#myCarousel" class="left" ... /*style="width:0px" Remove this*/>然后在你的 CSS 上添加这个：
.carousel-control { top:50%; width:auto; height:1em; background:transparent; } .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { position:static; display:block; width:auto; } .carousel-control .glyphicon-chevron-left:before { margin-left:0; }
And Now you Have THIS RESULT
现在你有了这个结果
Now to change the arrowto an image you can reset the content of the beforepseudo-element and instead add your image as a background like this:
现在要将箭头更改为图像，您可以重置before伪元素的内容，而是将图像添加为背景，如下所示：
.carousel-control .glyphicon-chevron-right:before {
//Reset the icon
content: " ";
//Give layout
display:block;
//Your image as background
background:url('http://yourarrow.png') no-repeat;
//To show full image set the dimensions
width:30px;
height:30px;
}
And Now you can Have THIS RESULT
现在你可以得到这个结果
回答by Adrian Enriquez
Here you go Sweat Coder. I recreated the code. I saw that you are using class="container"multiple times. and for the carousel to work properly you must include the controls inside the class="container. I replaced the <span>tags with <img>in the controls for the custom images.
在这里，您可以使用汗水编码器。我重新创建了代码。我看到你class="container"多次使用。为了使转盘正常工作，您必须在class="container. 我在自定义图像的控件中替换了<span>标签<img>。
Feel free to comment if you have any questions.
如果您有任何问题，请随时发表评论。
Fiddle
小提琴
HTML
HTML
<div class="container">
<div class="navbar-wrapper" style=";margin-top:0px">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://www.zerogravpro.com/temp/bootstrap/images/1.jpg">
</div>
<div class="item">
<img src="http://www.zerogravpro.com/temp/bootstrap/images/2.jpg">
</div>
<div class="item">
<img src="http://www.zerogravpro.com/temp/bootstrap/images/3.jpg">
</div>
</div>
<!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<img class="chevron chevron-left" src="http://alexoliveira.me/Hawaii/images/chevron-left.png" />
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<img class="chevron chevron-right" src="http://alexoliveira.me/Hawaii/images/chevron-right.png" />
</a>
</div>
</div>
CSS
CSS
.chevron {
width:30%;
position:absolute;
top:40%;
}
.container {
background-color:#343432;
}
.chevron-left {
left:5%;
}
.chevron-right {
right:5%;
}
body {
background-color:#343432
}
回答by sarah s.
If you wrap the whole .carouselclass in a .containerdiv it should keep the carousel controls with the image and not the website itself. However, I disabled the responsiveness with my site, so this may not be exactly what you're looking for.
如果您将整个.carousel班级包装在一个.containerdiv 中，它应该保留带有图像的轮播控件，而不是网站本身。但是，我禁用了我的网站的响应能力，所以这可能不是您正在寻找的。
<div class="container">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner"></div>
<a href="#myCarousel" class="left carousel-control"></a>
<a href="#myCarousel" class="right carousel-control"></a>
</div>
</div>
回答by zms
You can view a lot of stuffs on this link http://www.landcoder.com/codes-change-style-carousel-bootstrap-367in terms of modifying the sourcecode of bootstrap carousel.
关于修改bootstrap carousel的源代码，你可以在这个链接上查看很多东西http://www.landcoder.com/codes-change-style-carousel-bootstrap-367。
I think your problem is the problem:
我认为你的问题是问题：
.carousel-control {
background: #343432;
position: absolute;
top: 0; /* this might be your problem */
}
If you want to side arrows move according to the image, change top to 50%.
如果要根据图像移动侧向箭头，请将顶部更改为 50%。
.carousel-control {
background: #343432;
position: absolute;
top: 50%;
}
回答by Atal Shrivastava
try this
尝试这个
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"><img src="images/left_arrow.png" class="img-responsive"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"><img src="images/right_arrow.png" class="img-responsive"></span>
</a>
css
css
.glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
position: absolute;
top: 50%;
left: 50%;
z-index: 5;
display: inline-block;
}
