Twitter Bootstrap走马灯 - 无法更改侧边箭头

Question

Twitter Bootstrap走马灯 - 无法更改侧边箭头

6

我在我的网页上使用了Twitter bootstrap走马灯，目前已经基本实现了功能，但我无法让边缘箭头按我的要求工作。我的CSS知识可能只有五分之一十。

目前，“glyph”箭头是绝对从窗口的左右边缘定位的。当我缩小或放大窗口时，这些箭头与窗口边缘的距离保持不变。这很奇怪，因为它们在轮播图像上方移动。我希望它们在轮播图像上保持固定位置，而不是在浏览器窗口上。此外，我需要将字体字形更改为透明图像。

单击左右箭头可以滚动轮播。它们不是图像，而是字体字形，我猜这是某种奇怪的字体。以下是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);

以下是内部span的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 开发者工具检查器时，在 span 中我看到了这个：

::before

我需要知道如何更改箭头位置，使其相对于轮播图像固定，而不是浏览器窗口。并且我需要将字形更改为我有的一些透明箭头。

如果您想检查任何元素，请查看以下实际网页： http://www.zerogravpro.com/temp/bootstrap/

谢谢。

- HerrimanCoder

5个回答

2

这里是代码，我重新编写了它。我看到你多次使用 class="container"，为了让轮播正常工作，您必须将控件包含在 class="container" 中。我在自定义图像的控件中将 <span> 标记替换为 <img>。

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

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
}

- Adrian Enriquez

抱歉，我忘记加载jQuery库了。虽然问题已经被回答了，但我已经更新了Fiddle。 - Adrian Enriquez

非常感谢！这对我有用。我只是将CSS添加到轮播CSS文件中，并将图像放置在正确的文件夹中，它就起作用了！ - Nav

0

如果你把整个 .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>

- sarah s.

0

试一下这个

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

当我使用这段代码时，我已经从bootstrap.css中删除了glphs，不再需要在此处添加glyphs。对我来说，它百分之百有效。 - Atal Shrivastava

Atal：你能放一个链接到你的CSS文件或其他什么东西吗？它对我不起作用，而且我也不知道你做了什么更改。我尝试了你发布的代码，但是没有任何效果；事实上，它让情况变得更糟。我很想得到你的解决方案。 - HerrimanCoder

检查我创建的实时代码这里。 - Atal Shrivastava

我将在周一为您重新创建Bootstrap轮播，并发布代码。根据我们的需求，更改轮播的CSS和JS非常容易。这是我公司网站的未使用版本，我在其中使用了Bootstrap，但我意识到如果您正在寻找网格系统，则960 gs更好。 - Atal Shrivastava

从spans中删除glyphicon类。这将删除原始的图标。这应该有助于放置图像。 - Alex Morales

显示剩余2条评论

0

关于修改 Bootstrap 轮播组件的源码，你可以在此链接 http://www.landcoder.com/codes-change-style-carousel-bootstrap-367 中找到很多相关内容。

我认为你遇到的问题就是这个：

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

如果您想让侧边箭头与图像一起移动，请将“top”更改为50%。

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

- zms

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DaniP · Accepted Answer

我已经在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;
}

现在你已经有了这个结果

现在要把箭头改成一个图片，你需要重置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;
   }

现在你可以获得这个结果