Twitter Bootstrap 轮播 - 无法更改侧箭头答案

【问题标题】：Twitter Bootstrap carousel - can't change side arrowsTwitter Bootstrap 轮播 - 无法更改侧箭头
【发布时间】：2014-01-29 04:40:43
【问题描述】：

我有一个 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/

谢谢。

【问题讨论】：

标签： css twitter-bootstrap

【解决方案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 标签是导航箭头，相对于他的容器#myCarousel 定位在absolute。内部跨度的实际位置使箭头远离边缘。

由于容器#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;
}

现在你有 THIS RESULT

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

现在你可以拥有 THIS RESULT

【讨论】：

Danko，这看起来很有希望，但在 jsfiddle 中，它仍然显示右/左箭头对齐窗口的两侧，而不是对齐图像的左右两侧。箭头如何位于图像顶部，左侧和右侧？如果你把那个 jsfiddle 窗口拖得更宽，你会看到箭头粘在窗口上，而不是图像上。
@SweatCoder 正如我在答案中所说，箭头的位置附在容器上，该容器随着窗口的上下生长而产生相同的效果。检查这个FIDDLE
@SweatCoder 或者像这个另一个选项jsfiddle.net/d4Cwf/7/embedded/result 但你需要改变结构和JS
丹科，你救了我。这个小提琴是最接近的，虽然我不得不修改它相当数量：jsfiddle.net/d4Cwf/6/embedded/result。不管怎样，你让我走出了困境。享受积分。
很高兴能帮助你交配@SweatCoder

【解决方案2】：

给你 Sweat 编码器。我重新创建了代码。我看到您多次使用class="container"。为了使轮播正常工作，您必须在class="container 中包含控件。我在自定义图像的控件中用<img> 替换了<span> 标签。

如果您有任何问题，请随时发表评论。

Fiddle

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

.chevron {
    width:30%;
    position:absolute;
    top:40%;
}
.container {
    background-color:#343432;
}
.chevron-left {
    left:5%;
}
.chevron-right {
    right:5%;
}
body {
    background-color:#343432
}

【讨论】：

对不起，我忘了加载 jQuery。尽管问题已经得到解答，但我还是更新了 Fiddle。
非常感谢！这对我有用。我刚刚将 CSS 添加到 carousel css 文件中，并将图像放在正确的文件夹中，它工作了！

【解决方案3】：

试试这个

<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

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

【讨论】：

Atal：我尝试了您的解决方案，但没有奏效。我的图像图标出现了，但它们没有浮在我的轮播图像上。相反，他们飘过左侧并骑行。而且它们不可点击，字形仍然存在。旧字形也变得不可点击（点击时没有图像移动）。还有什么我可以尝试的吗？
当我使用此代码时，我已从 bootstrap.css 中删除了 glyphs，并且这里不再需要添加 glyphs。它 100% 为我工作。
Atal：你能把你的css文件的链接放在什么地方吗？它对我不起作用，我不知道你做了什么改变。我尝试了您发布的代码，但它什么也没做；事实上，它使情况变得更糟。我很想得到你的解决方案。
查看我创建的实时代码here
看起来不错，但这似乎是一个完整的网站，其轮播的行为几乎符合我的要求。有重要的区别。我不确定如何使用它。

【解决方案4】：

如果您将整个 .carousel 类包装在 .container div 中，它应该将轮播控件与图像而不是网站本身一起保留。但是，我禁用了我的网站的响应能力，因此这可能不是您想要的。

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

【讨论】：

【解决方案5】：

你可以在这个链接http://www.landcoder.com/codes-change-style-carousel-bootstrap-367查看很多关于修改引导轮播源代码的东西。

我认为你的问题是问题：

 .carousel-control {
   background: #343432;
   position: absolute;
   top: 0; /* this might be your problem */
  }

如果要侧向箭头根据图像移动，将顶部更改为 50%。

   .carousel-control {
     background: #343432;
     position: absolute;
     top: 50%;
  }

【讨论】：