0

Estou tentando mostrar e esconder uma div se a div do slide tiver a classe active. O problema é que a div sempre fica sendo exibida, mesmo quando o slide do bootstrap muda e a classe active é retirada.

<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>
2
  • Pra mim funcionou, removi a classe "active" e foi escondido a div.
    – BrTkCa
    21/06/2017 às 14:32
  • Pra mim não está funcionando. O slide muda para o slide2, a classe active é removida do slide1 e a div com a classe carousel-caption continua sendo mostrada
    – Marcelo
    21/06/2017 às 14:40

2 Respostas 2

1

1) pode parecer óbvio, mas vc está carregando uma lib do jquery junto nessa página, né?

2) esse $(document).ready() só executa uma vez, quando a página é carregada, se quiser algo monitorando a classe do slide1 vc pode colocar um setInterval com um loop de segundos, ou fazer um .bind .change .on de jquery

5
  • Usei o .change mas não funcionou;
    – Marcelo
    21/06/2017 às 14:47
  • $("#slide1").change(function() { if($(this).hasClass("active")) { $(".carousel-caption").show(); } else { $(".carousel-caption").hide(); } });
    – Marcelo
    21/06/2017 às 14:48
  • coloca o bind no botão/link que faz essa modificação da classe.ão sei se tem como monitorar um item que não seja elemento de formulário (input, select)
    – Marlon Yow
    23/06/2017 às 12:29
  • Não tem botão, o slide passa automatico.
    – Marcelo
    23/06/2017 às 12:34
  • procura onde faz esse "automágico" aí, e coloca a chamada da sua função dentro dele, deve ser um setInterval ou setTimeout dessa lib de carrossel
    – Marlon Yow
    28/06/2017 às 11:46
0

coloca o caption dentro do item.

é erro de HTML.

<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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .