Show and hide caption with jquery

Question

Show and hide caption with jquery

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I'm trying to show and hide a div if the slide div has the active class. The problem is that the div is always 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>

javascript jquery twitter-bootstrap

asked by anonymous 21.06.2017 / 16:22

2 answers

Reverse position / value of the vector How to bring the javascript file to the wordpress theme via code

score 1 · Answer 1

1) It may seem obvious, but you're loading a jquery lib together on that page, right?

2) this $ (document) .ready () only runs once, when the page loads, if you want something monitoring the slide1 class you can put a setInterval with a second loop , or make a .bind .change .on from jquery

score 0 · Answer 2

puts the caption inside the item.

is HTML error.

<div id="slide1" class="item active">
  <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>