Carousel should contain indicators showing current slide and allowing to select slide by clicking in indicator. Slides should change after 5 seconds. According to Bootstrasp 3 carousel documentation it should support this. Actually, indicators are not show.
I tried code from bootstrap manual:
<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>
But indicators are not displayed. How to fix this ?
Put .carousel-indicators
into .carousel-inner
.
UPD: Ok.. try this:
<!-- 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>
Actually the indicators are showing. Set:
.carousel-indicators li {
background-color: black;
}
And you can see them at bottom of page.
EDIT:
Try with this, and look for them at bottom of page:
.carousel-indicators {
background-color: black;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.