Question

我正在尝试用一些glyphicons替换bootstrap指示符圈。我试图将glyphicon添加到旋转木马指示器，但不起作用。 http://jsfiddle.net/bn6aA/57/

HTML

 <div id="locations" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators glyphicon glyphicon-refresh">
                <li data-target="#locations" data-slide-to="0" class="active"></li>
                <li data-target="#locations" data-slide-to="1"></li>
                <li data-target="#locations" data-slide-to="2"></li>
                <li data-target="#locations" data-slide-to="3"></li>
            </ol>

            <div class="carousel-inner">
                <div class="item active ">
                    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
                </div>

                <div class="item">
                    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
                </div>

                <div class="item">
                    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
                </div>

                <div class="item">
                    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
                </div>
            </div>

            <a class="left carousel-control" href="#locations" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#locations" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>

        </div>

Answer 1

使用glyphicons作为轮播指示器并不是一件容易的事情，因为我们必须做一些修改。

我从列表中删除了类carousel-indicators，我将字形符号放在{ {1}}列出项目，并使用我的custom-list类来设置字形图样式。

我还删除了导入的custom-list库，因为它弄乱了{{1} }和bootstrap-combined轮播控件。

上述方法有一个消极方面，即我们无法设置与当前left幻灯片相对应的字形，因为我们从列表中删除了right类。

< / p>

active

carousel-indicators

Answer 2

直接从引导网站（http://getbootstrap.com/javascript/#carousel）：

<!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

然而，这里的某些事情有点不稳定，所以用CSS

删除这样的圆圈

.carousel-control {
    background: none !important;
    border: none;
}

证明：http://jsfiddle.net/bn6aA/65/

正如您所看到的，这仍然无法正确呈现。有些东西不合适，大小太大等等......这是因为你使用的是bootstrap-combined.min.css V2.3.1和bootstrap.css V3.0.0

删除bootstrap-combined.min.css会产生更好看的解决方案：http://jsfiddle.net/bn6aA/64/

Glyphicon而不是轮播指示器

2 个答案: