轮播应包含显示当前幻灯片的指示器,并允许通过单击指示器来选择幻灯片。 幻灯片应在 5 秒后更改。 根据 Bootstrasp 3 carousel 文档,它应该支持这一点。 实际上,指标并未显示。
我尝试了 bootstrap 手册中的代码:
<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" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
<li data-target="#carousel-example-generic" data-slide-to="6"></li>
<li data-target="#carousel-example-generic" data-slide-to="7"></li>
<li data-target="#carousel-example-generic" data-slide-to="8"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="/store/Webconte/Details/124">
<img src="/store/Webconte/Image/124" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/123">
<img src="/store/Webconte/Image/123" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/105">
<img src="/store/Webconte/Image/105" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/95">
<img src="/store/Webconte/Image/95" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/107">
<img src="/store/Webconte/Image/107" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/100">
<img src="/store/Webconte/Image/100" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/98">
<img src="/store/Webconte/Image/98" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/78">
<img src="/store/Webconte/Image/78" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/11">
<img src="/store/Webconte/Image/11" />
</a>
</div>
<!-- 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>
</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>
</a>
</div>
但指标不显示。 如何解决这个问题?
最佳答案
将.carousel-indicators
放入.carousel-inner
。
UPD:好的..试试这个:
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="/store/Webconte/Details/124">
<img src="/store/Webconte/Image/124" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/123">
<img src="/store/Webconte/Image/123" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/105">
<img src="/store/Webconte/Image/105" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/95">
<img src="/store/Webconte/Image/95" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/107">
<img src="/store/Webconte/Image/107" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/100">
<img src="/store/Webconte/Image/100" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/98">
<img src="/store/Webconte/Image/98" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/78">
<img src="/store/Webconte/Image/78" />
</a>
</div>
<div class="item ">
<a href="/store/Webconte/Details/11">
<img src="/store/Webconte/Image/11" />
</a>
</div>
<!-- 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>
</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>
</a>
<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" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
<li data-target="#carousel-example-generic" data-slide-to="6"></li>
<li data-target="#carousel-example-generic" data-slide-to="7"></li>
<li data-target="#carousel-example-generic" data-slide-to="8"></li>
</ol>
</div>
关于html - 如何在 Bootstrap 轮播中显示指标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30538887/