Twitter Bootstrap轮播 - 无法改变侧箭头

Question

我有一个Twitter引导程序轮播在我的网页上工作得很好,但我不能让侧箭头表现我想要的方式.我的CSS知识可能是10分中的5分.

目前,"字形"箭头绝对位于窗口的左右边缘.当我缩小或增大窗口时,这些箭头与窗口边缘保持完全相同的距离.这是奇怪和错误的,因为它们遍布旋转木马图像的顶部.我希望它们保持在旋转木马图像上的固定位置,而不是在浏览器窗口上.此外,我需要将字体字形更改为透明图像.

左键和右箭头在单击时滚动旋转木马.它们不是图像,它们是字形,我猜它是某种奇怪的字体.这是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>

这是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);

这是内跨的css:

.glyphicon-chevron-right {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}

和:

.glyphicon {
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}

虽然它没有在原始html中显示,但在查看Chrome开发工具栏检查器时,在跨度内我看到了:

::before

因此,我需要知道如何更改箭头位置以保持相对于轮播图像而不是浏览器窗口的固定.我需要将字形更改为我拥有的一些透明箭头.

以下是您要检查任何元素的实际网页:http: //www.zerogravpro.com/temp/bootstrap/

谢谢.

Answer 1

我已经在JSFIDDLE中复制了您的代码以重新创建问题.

你有这样的结构:

<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>

当a标签导航箭头,然后定位absolute相对于他的容器#myCarousel.内部跨距的实际位置使箭头远离边缘.

由于容器#myCarousel始终使用屏幕调整大小,因此箭头始终可见,并且可以达到以下限制:

• 首先删除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;
  }
  

现在你有了这个结果

现在要将箭头更改为图像,您可以重置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;
   }

现在你可以拥有这个结果