JavaScriptがブートストラップタブに読み込まれないのはなぜですか？

Question

私はブレードテンプレート上にブートストラップ4タブを含むウェブサイトを持っています。私の問題は、タブ内にタブがあることです。タブをクリックすると、他のタブには作成したSlicks Javascriptプラグインがロードされません。スライドの矢印をクリックしたときにのみ、スライドはうまく動作しますが、スライドをクリックしたときではなく、ページが読み込まれたときにすべてをロードします。

<div class="col-md-7"> 
<ul class="nav nav-tabs nav-justified nav-cptec"> 
    <li class="nav-item"> 
    <a class="d-flex align-items-center align-middle justify-content-center nav-link active" data-toggle="tab" href="#condicaoRegiao" role="tab">Tempo</a> 
    </li> 
    <li class="nav-item"> 
    <a class="d-flex align-items-center align-middle justify-content-center nav-link" data-toggle="tab" href="#maxima" role="tab">M&aacute;ximas</a> 
    </li> 
    <li class="nav-item"> 
    <a class="d-flex align-items-center align-middle justify-content-center nav-link" data-toggle="tab" href="#minima" role="tab">M&iacute;nimas</a> 
    </li> 
    <li class="nav-item"> 
    <a class="d-flex align-items-center align-middle justify-content-center nav-link" data-toggle="tab" href="#aviso" role="tab">Aviso</a> 
    </li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane" id="maxima" role="tabpanel"> 
    <ul class="nav nav-tabs nav-cptec nav-justified d-flex justify-content-center" id="tabs-regiao"> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle nav-link active" data-toggle="tab" href="#brasilMaxima" role="tab">Brasil</a> 
     </li> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#centro-oesteMaxima" role="tab">Centro-Oeste</a> 
     </li> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#nordesteMaxima" role="tab">Nordeste</a> 
     </li> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#norteMaxima" role="tab">Norte</a> 
     </li> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#sudesteMaxima" role="tab">Sudeste</a> 
     </li> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#sulMaxima" role="tab">Sul</a> 
     </li> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle justify-content-center nav-link" data-toggle="tab" href="#menuVale" role="tab">Vale do Para&iacute;ba</a> 
     </li> 
    </ul> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="brasilMaxima" role="tabpanel"> 
     <div class="condicaoRegiao-slider mt-2"> 
      @for($i = 1; $i <=6; $i++) 
      <div class="text-center"> 
       <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/brtx{{ $i }}.jpg" title="M&aacute;ximas Brasil" alt="M&aacute;ximas Brasil" class="img-fluid rounded mx-auto align-middle"> 
       </a> 
      </div> 
      @endfor 
     </div> 
     </div> 
     <div class="tab-pane" id="centro-oesteMaxima" role="tabpanel"> 
     <div class="condicaoRegiao-slider mt-2"> 
      @for($i = 1; $i <= 6; $i++) 
      <div class="text-center"> 
      <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/coe_regtx{{ $i }}.jpg" title="M&aacute;ximas Centro Oeste" alt="M&aacute;ximas Centro Oeste" class="img-fluid rounded mx-auto align-middle"> 
      </a> 
      </div> 
      @endfor 

     </div> 
     </div> 
     <div class="tab-pane" id="nordesteMaxima" role="tabpanel"> 
     <div class="condicaoRegiao-slider mt-2"> 
      @for($i = 1; $i <= 6; $i++) 
      <div class="text-center"> 
       <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/nde_regtx{{ $i }}.jpg" title="M&aacute;ximas Nordeste" alt="M&aacute;ximas Nordeste" class="img-fluid rounded mx-auto align-middle"> 
       </a> 
      </div> 
      @endfor 
     </div> 
     </div> 
     <div class="tab-pane" id="norteMaxima" role="tabpanel"> 
     <div class="condicaoRegiao-slider mt-2"> 
      @for($i = 1; $i <= 6; $i++) 
      <div class="text-center"> 
       <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/nor_regtx{{ $i }}.jpg" title="M&aacute;ximas Norte" alt="M&aacute;ximas Norte" class="img-fluid rounded mx-auto align-middle"> 
       </a> 
      </div> 
      @endfor 
     </div> 
     </div> 
     <div class="tab-pane" id="sudesteMaxima" role="tabpanel"> 
     <div class="condicaoRegiao-slider mt-2"> 
      @for($i = 1; $i <= 6; $i++) 
      <div class="text-center"> 
       <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/sud_regtx{{ $i }}.jpg" title="M&aacute;ximas Sudeste" alt="M&aacute;ximas Sudeste" class="img-fluid rounded mx-auto align-middle"> 
       </a> 
      </div> 
      @endfor 
     </div> 
     </div> 
     <div class="tab-pane" id="sulMaxima" role="tabpanel"> 
     <div class="condicaoRegiao-slider mt-2"> 
      @for($i = 1; $i <= 6; $i++) 
      <div class="text-center"> 
       <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/sul_regtx{{ $i }}.jpg" title="M&aacute;ximas Sul" alt="M&aacute;ximas Sul" class="img-fluid rounded mx-auto align-middle"> 
       </a> 
      </div> 
      @endfor 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="tab-pane" id="minima" role="tabpanel"> 
    <ul class="nav nav-tabs nav-justified nav-cptec d-flex justify-content-center" id="tabs-regiao"> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle nav-link active" data-toggle="tab" href="#brasilMinima" role="tab">Brasil</a> 
     </li> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#centro-oesteMinima" role="tab">Centro-Oeste</a> 
     </li> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#nordesteMinima" role="tab">Nordeste</a> 
     </li> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#norteMinima" role="tab">Norte</a> 
     </li> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#sudesteMinima" role="tab">Sudeste</a> 
     </li> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#sulMinima" role="tab">Sul</a> 
     </li> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle justify-content-center nav-link" data-toggle="tab" href="#menuVale" role="tab">Vale do Para&iacute;ba</a> 
     </li> 
    </ul> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="brasilMinima" role="tabpanel"> 
     <div class="condicaoRegiao-slider mt-2"> 
      @for($i = 1; $i <= 6; $i++) 
      <div class="text-center"> 
       <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/brti{{ $i }}.jpg" title="M&iacute;nimas Brasil" alt="M&iacute;nimas Brasil" class="img-fluid rounded mx-auto align-middle"> 
       </a> 
      </div> 
      @endfor 
     </div> 
     </div> 
     <div class="tab-pane" id="centro-oesteMinima" role="tabpanel"> 
     <div class="condicaoRegiao-slider mt-2"> 
      @for($i = 1; $i <= 6; $i++) 
      <div class="text-center"> 
       <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/coe_regti{{ $i }}.jpg" title="M&iacute;nimas Centro Oeste" alt="M&iacute;nimas Centro Oeste" class="img-fluid rounded mx-auto align-middle"> 
       </a> 
      </div> 
      @endfor 
     </div> 
     </div> 
     <div class="tab-pane" id="nordesteMinima" role="tabpanel"> 
     <div class="condicaoRegiao-slider mt-2"> 
      @for($i = 1; $i <= 6; $i++) 
      <div class="text-center"> 
       <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/nde_regti{{ $i }}.jpg" title="M&iacute;nimas Nordeste" alt="M&iacute;nimas Nordeste" class="img-fluid rounded mx-auto align-middle"> 
       </a> 
      </div> 
      @endfor 
     </div> 
     </div> 
     <div class="tab-pane" id="norteMinima" role="tabpanel"> 
     <div class="condicaoRegiao-slider mt-2"> 
      @for($i = 1; $i <= 6; $i++) 
      <div class="text-center"> 
       <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/nor_regti{{ $i }}.jpg" title="M&iacute;nimas Norte" alt="M&iacute;nimas Norte" class="img-fluid rounded mx-auto align-middle"> 
       </a> 
      </div> 
      @endfor 
     </div> 
     </div> 
     <div class="tab-pane" id="sudesteMinima" role="tabpanel"> 
     <div class="condicaoRegiao-slider mt-2"> 
      @for($i = 1; $i <= 6; $i++) 
      <div class="text-center"> 
       <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/sud_regti{{ $i }}.jpg" title="M&iacute;nimas Sudeste" alt="M&iacute;nimas Sudeste" class="img-fluid rounded mx-auto align-middle"> 
       </a> 
      </div> 
      @endfor 
     </div> 
     </div> 
     <div class="tab-pane" id="sulMinima" role="tabpanel"> 
     <div class="condicaoRegiao-slider mt-2"> 
      @for($i = 1; $i <= 6; $i++) 
      <div class="text-center"> 
       <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas/temp/sul_regti{{ $i }}.jpg" title="M&iacute;nimas Sul" alt="M&iacute;nimas Sul" class="img-fluid rounded mx-auto align-middle"> 
       </a> 
      </div> 
      @endfor 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="tab-pane" id="aviso" role="tabpanel">Aviso</div> 
    <div class="tab-pane active" id="condicaoRegiao" role="tabpanel"> 
    <ul class="nav nav-tabs nav-cptec d-flex justify-content-center" id="tabs-regiao"> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle nav-link active" data-toggle="tab" href="#brasil" role="tab">Brasil</a> 
     </li> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#centro-oeste" role="tab">Centro-Oeste</a> 
     </li> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#nordeste" role="tab">Nordeste</a> 
     </li> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#norte" role="tab">Norte</a> 
     </li> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#sudeste" role="tab">Sudeste</a> 
     </li> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle nav-link" data-toggle="tab" href="#sul" role="tab">Sul</a> 
     </li> 
     <li class="nav-item"> 
     <a class="d-flex align-items-center align-middle justify-content-center nav-link" data-toggle="tab" href="#menuVale" role="tab">Vale do Para&iacute;ba</a> 
     </li> 
    </ul> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="brasil" role="tabpanel"> 
     <div class="condicaoRegiao-slider mt-2"> 
      @for($i = 1; $i <= 6; $i++) 
      <div class="text-center"> 
       <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//br{{ $i }}.jpg" title="Condiç&atilde;o de tempo Brasil" alt="Condiç&atilde;o de tempo Brasil" class="img-fluid rounded mx-auto align-middle"> 
       </a> 
      </div> 
      @endfor 
     </div> 
     </div> 
     <div class="tab-pane" id="centro-oeste" role="tabpanel"> 
     <div class="condicaoRegiao-slider mt-2"> 
      @for($i = 1; $i <= 6; $i++) 
      <div class="text-center"> 
       <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//coe_reg{{ $i }}.jpg" title="Condiç&atilde;o de tempo Centro Oeste" alt="Condiç&atilde;o de tempo Centro Oeste" class="img-fluid rounded mx-auto align-middle"> 
       </a> 
      </div> 
      @endfor 
     </div> 
     </div> 
     <div class="tab-pane" id="nordeste" role="tabpanel"> 
     <div class="condicaoRegiao-slider mt-2"> 
      @for($i = 1; $i <= 6; $i++) 
      <div class="text-center"> 
      <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//nor_reg{{ $i }}.jpg" title="Condiç&atilde;o de Tempo Nordeste" alt="Condiç&atilde;o de Tempo Nordeste" class="img-fluid rounded mx-auto align-middle"> 
      </a> 
      </div> 
      @endfor 
     </div> 
     </div> 
     <div class="tab-pane" id="norte" role="tabpanel"> 
     <div class="condicaoRegiao-slider mt-2"> 
      <div class="text-center"> 
      <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//nde_reg1.jpg" title="An&aacute;lise Sin&oacute;tica 24h" alt="Condiç&atilde;o br1" class="img-fluid rounded mx-auto align-middle"> 
      </a> 
      </div> 
      <div class="text-center"> 
      <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//nde_reg2.jpg" title="An&aacute;lise Sin&oacute;tica 24h" alt="Condiç&atilde;o br2" class="img-fluid rounded mx-auto align-middle"> 
      </a> 
      </div> 
      <div class="text-center"> 
      <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//nde_reg3.jpg" title="An&aacute;lise Sin&oacute;tica 24h" alt="Condiç&atilde;o br3" class="img-fluid rounded mx-auto align-middle"> 
      </a> 
      </div> 
      <div class="text-center"> 
      <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//nde_reg4.jpg" title="An&aacute;lise Sin&oacute;tica 24h" alt="Condiç&atilde;o br4" class="img-fluid rounded mx-auto align-midle"> 
      </a> 
      </div> 
      <div class="text-center"> 
      <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//nde_reg5.jpg" title="An&aacute;lise Sin&oacute;tica 24h" alt="Condiç&atilde;o br5" class="img-fluid rounded mx-auto align-midle"> 
      </a> 
      </div> 
      <div class="text-center"> 
      <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//nde_reg6.jpg" title="An&aacute;lise Sin&oacute;tica 24h" alt="Condiç&atilde;o br6" class="img-fluid rounded mx-auto align-midle"> 
      </a> 
      </div> 
     </div> 
     </div> 
     <div class="tab-pane" id="sudeste" role="tabpanel"> 
     <div class="condicaoRegiao-slider mt-2"> 
      @for($i = 1; $i <= 6; $i++) 
      <div class="text-center"> 
       <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//sud_reg{{ $i }}.jpg" title="Condiç&atilde;o de Tempo Sudeste" alt="Condiç&atilde;o de Tempo Sudeste" class="img-fluid rounded mx-auto align-middle"> 
       </a> 
      </div> 
      @endfor 
     </div> 
     </div> 
     <div class="tab-pane" id="sul" role="tabpanel"> 
     <div class="condicaoRegiao-slider mt-2"> 
      @for($i = 1; $i <= 6; $i++) 
      <div class="text-center"> 
       <a href="#" data-toggle="modal" data-target="#CondicaoTexto" class="links"> 
       <img src="http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/bandas//sul_reg{{ $i }}.jpg" title="Condiç&atilde;o de tempo Sul" alt="Condiç&atilde;o de Tempo Sul" class="img-fluid rounded mx-auto align-middle"> 
       </a> 
      </div> 
      @endfor 
     </div> 
     </div> 
     <div class="tab-pane" id="menuVale" role="tabpanel"> 
     <a href="#" data-toggle="modal" data-target="#modalVale"><img src="{{ getThumbnail('http://img0.cptec.inpe.br/~rgrafico/portal_tempo_novo/vale_paraiba/mapa_vale.jpg', 430, 430, array(430, 430, 0, 0), 'resize') }}" title="An&aacute;lise Sin&oacute;tica 24h" alt="Condiç&atilde;o br1" class="img-fluid rounded mx-auto align-middle"></a> 
     </div> 
    </div> 
    <div class="p-2 text-align-left links"><a href="#" data-toggle="modal" data-target="#legendaCondicao"><small>» Legenda</small></a></div> 
    </div> 
</div> 

$(".condicaoRegiao-slider").slick({ 
    infinite: false, 
    speed: 0, 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    prevArrow: "<i class='fa fa-chevron-left slick-prev flecha-esquerda'></i>", 
    nextArrow: "<i class='fa fa-chevron-right slick-next flecha-direita'></i>", 
    responsive: [ 
    { 
     breakpoint: 600, 
     settings: { 
      slidesToShow: 1, 
      slidesToScroll: 1 
     } 
    } 
    ] 
}); 

Answer 1

この滑らかな機能（）http://jsbin.com/を追加

slick('setPosition', 0) 

Slick documentation