rock stone rock stone -3 years ago 75
CSS Question

Carousel not visible when active state is removed?

I am making carousel and inserting it in col-md-8 and remaining 4 grids are for side navigation. When I remove active class from wrapper class for slides then my carousel is not visible why does this happen why do we need to make it active.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles">
</div>

<div class="item">
<img src="chicago.jpg" alt="Chicago">
</div>

<div class="item">
<img src="ny.jpg" alt="New York">
</div>
</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
</a>
</div>


If I change
class="item active"
to
class="item"
then my carousel is not visible why does this happen.

Answer Source

Active state means that is displaying one element from the list of images in your carousel, meaning if you don't have active state on any of the items will not display any slides, resulting in not displaying at all the carousel, since the height of the carousel is determined by the height of the active tab.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download