0
I’m trying to show and hide a div if the slide div has the active class. The problem is that the div always keeps being displayed, even when the bootstrap slide changes and the active class is removed.
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div id="slide1" class="item active"></div>
<div id="slide2" class="item"></div>
<div id="caption1" class="carousel-caption">
<div class="container-caption">
<h1>Crossfit 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius efficitur porta. Aliquam sit amet aliquet neque. Vivamus tempus tristique magna eget rutrum.</p>
<button class="btn btn-primary">Saiba mais</button>
</div>
</div>
<div id="caption2" class="carousel-caption">
<div class="container-caption">
<h1>Crossfit 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius efficitur porta. Aliquam sit amet aliquet neque. Vivamus tempus tristique magna eget rutrum.</p>
<button class="btn btn-primary">Saiba mais</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
if($("#slide1").hasClass("active")) {
$(".carousel-caption").show();
} else {
$(".carousel-caption").hide();
}
});
</script>
For me it worked, I removed the class "active" and was hidden to
div
.– BrTkCa
It’s not working for me. Slide changes to slide2, active class is removed from slide1 and div with the Carousel-caption class is still shown
– Marcelo