Home » Javascript » Tabs bootstra4 dont load javascript content

Tabs bootstra4 dont load javascript content

Posted by: admin November 1, 2017 Leave a comment

Questions:

I have a website that contains Bootstrap 4 tabs on a blade template. My problem is, I have tabs inside tabs, and when I click on one, other tabs don’t load the slicks Javascript plugin that I have created. Only when I click on the arrow of the slide, the slide works well, but I want to load everything when the page loads, not when I click on slide.

<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
}
}
]
});
Answers: