I am using bootstrap carousel with EE's Grid and the page is not displaying correctly. All 3 slides are displaying on top of each other. I think its the "active" class is being applied to each slide in each div. I think I need a conditional on the active class but I don't know how to do it.
here is the code:
<div class="carousel slide" data-ride="carousel" id="carousel-example">
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
{exp:channel:entries channel="slider" {snp-disable}}
{home_page_slider}
<div class="item active"><img src="{home_page_slider:slider_image}" alt="Slide"></div>
{/home_page_slider}
{/exp:channel:entries}
</div>
<a href="#carousel-example" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel-example" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>