Please, I still can not find the solution:
I created a bootstrap carousel with divs and another smaller carousel in it together. When I pass the larger carousel (which encompasses everything) and I go back to the item that has the smaller carousel, the contents of that smaller carousel disappear.
I've been careful to check if it has any open tags but everything is ok.
Can some attribute be missing?
Follow the html:
.template-tabela .carousel-control {
height: 70px;
}
.template-tabela #carousel-table .carousel-control.right,
.template-tabela #carousel-table .carousel-control.left {
margin-left: 20px;
}
.tabela-page {
border-left: 1px solid #fff;
border-right: 1px solid transparent;
}
.titulo-item-carousel {
text-align: center;
border-bottom: 1px solid gray;
padding-bottom: 10px;
margin: 20px 140px;
text-transform: uppercase;
}
.subtitulo-item-carousel {
text-align: center;
border-bottom: 1px solid gray;
padding-bottom: 10px;
}
.titulo-carousel-small {
text-align: center;
border-bottom: 1px solid gray;
padding-bottom: 15px;
}
.conjunto-tabela {
margin-bottom: 40px;
}
.tabela-page td {
padding: 10px 10px;
}
.tabela-page .item {
text-align: center;
}
.tabela-page .par {
background-color: #eee;
}
.first-line {
font-weight: bold;
}
.scale {
float: right;
}
.div-grupo {
border-top: 1px solid gray;
}
.tabela-pontos p {
color: gray;
}
.atletica-icone img {
width: 60px;
}
.atleticas-box {
width: 90%;
float: right;
}
.atleticas-box a,
.atleticas-box a:hover {
color: #333;
text-decoration: none;
}
.atleticas-box .glyphicon-remove {
padding: 20px;
}
#carousel-table .carousel-control.left,
#carousel-table .carousel-control.right {
background-image: none !important;
width: 6%;
}
.template-tabela .carousel-control {
height: 70px;
}
#carousel-table .carousel-control .icon-prev,
#carousel-table .carousel-control .icon-next,
#carousel-table .carousel-control .glyphicon-chevron-left,
#carousel-table .carousel-control .glyphicon-chevron-right {
top: 0%;
color: #333;
margin-top: 20px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel-table" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="item active">
<h2 class="fonte-titulo titulo-item-carousel">FASE DE GRUPOS</h2>
<div class="conjunto-tabela col-xs-12 col-sm-10 col-sm-offset-1">
<div class="col-xs-12 col-sm-7 tabela-pontos">
<h2 class="fonte-titulo">Grupo 1</h2>
<table border="1" class="col-xs-12 tabela-page fonte-texto">
<tr class="first-line"><!-- títulos -->
<td>Classificação</td>
<td class="item" title="Pontos">P</td>
<td class="item" title="Jogos" class="terca">J</td>
<td class="item" title="Vitórias">V</td>
<td class="item" title="Empates">E</td>
<td class="item" title="Derrotas">D</td>
<td class="item" title="Gols Pontuados">GP</td>
<td class="item" title="Gols Contra">GC</td>
<td class="item" title="Saldo de Gols">SG</td>
</tr>
<tr class="par"><!-- linha -->
<td>
<span>A.A.A.F.</span>
<span class="scale">2<span class="fa fa-arrow-up"></span></span>
</td>
<td class="item">2</td>
<td class="item">3</td>
<td class="item">4</td>
<td class="item">5</td>
<td class="item">6</td>
<td class="item">6</td>
<td class="item">6</td>
<td class="item">6</td>
</tr>
<tr>
<td>
<span>A.M.S.C.F.</span>
<span class="scale">1<span class="fa fa-arrow-down"></span></span>
</td>
<td class="item">9</td>
<td class="item">10</td>
<td class="item">11</td>
<td class="item">12</td>
<td class="item">3</td>
<td class="item">14</td>
<td class="item">14</td>
<td class="item">14</td>
</tr>
<tr class="par"><!-- linha -->
<td>
<span>A.A.A.F.</span>
<span class="scale"><span class="fa fa-square"></span></span>
</td>
<td class="item">2</td>
<td class="item">3</td>
<td class="item">4</td>
<td class="item">5</td>
<td class="item">6</td>
<td class="item">6</td>
<td class="item">6</td>
<td class="item">6</td>
</tr>
<tr>
<td>
<span>A.M.S.C.F.</span>
<span class="scale">4<span class="fa fa-arrow-down"></span></span>
</td>
<td class="item">9</td>
<td class="item">10</td>
<td class="item">11</td>
<td class="item">12</td>
<td class="item">3</td>
<td class="item">14</td>
<td class="item">14</td>
<td class="item">14</td>
</tr>
</table>
</div>
<!-- carousel confrontos -->
<div id="carousel-small-table1" class="carousel slide col-xs-12 col-sm-5" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-xs-12">
<h3 class="fonte-titulo titulo-carousel-small">1ª Rodada</h3>
<ul>
<li>
<h3 class="fonte-titulo"><strong>Sex 6/jan </strong> Time - 20:00</h3>
<div class="fonte-texto div-center">
<span class="numeracao-tabela">1</span>
<div class="div-center atleticas-box">
<span class="atletica-icone fonte-texto">
<a href="#">A.A.A.F.<img src="http://pt.seaicons.com/wp-content/uploads/2016/09/Mimetypes-image-x-generic-icon.png"></a></span><spanclass="glyphicon glyphicon-remove"></span>
<span class="atletica-icone fonte-texto">
<a href="#"><img src="http://pt.seaicons.com/wp-content/uploads/2016/09/Mimetypes-image-x-generic-icon.png">A.M.S.C.</a></span></div></div></li><hr><li><h3class="fonte-titulo"><strong>Sex 6/jan </strong> Time - 20:00</h3>
<div class="fonte-texto div-center">
<span class="numeracao-tabela">2</span>
<div class="div-center atleticas-box">
<span class="atletica-icone fonte-texto">
<a href="#">A.A.A.F.<img src="http://pt.seaicons.com/wp-content/uploads/2016/09/Mimetypes-image-x-generic-icon.png"></a></span><spanclass="glyphicon glyphicon-remove"></span>
<span class="atletica-icone fonte-texto">
<a href="#"><img src="http://pt.seaicons.com/wp-content/uploads/2016/09/Mimetypes-image-x-generic-icon.png">A.M.S.C.</a></span></div></div></li></ul></div></div><!--itemactive--><divclass="item">
<div class="col-xs-12">
<h3 class="fonte-titulo titulo-carousel-small">2ª Rodada</h3>
<ul>
<li>
<h3 class="fonte-titulo"><strong>Sex 6/jan </strong> Time - 20:00</h3>
<div class="fonte-texto div-center">
<span class="numeracao-tabela">3</span>
<div class="div-center atleticas-box">
<span class="atletica-icone fonte-texto">
<a href="#">A.A.A.F.<img src="http://pt.seaicons.com/wp-content/uploads/2016/09/Mimetypes-image-x-generic-icon.png"></a></span><spanclass="glyphicon glyphicon-remove"></span>
<span class="atletica-icone fonte-texto">
<a href="#"><img src="http://pt.seaicons.com/wp-content/uploads/2016/09/Mimetypes-image-x-generic-icon.png">A.M.S.C.</a></span></div></div></li><hr><li><h3class="fonte-titulo"><strong>Sex 6/jan </strong> Time - 20:00</h3>
<div class="fonte-texto div-center">
<span class="numeracao-tabela">4 </span>
<div class="div-center atleticas-box">
<span class="atletica-icone fonte-texto">
<a href="#">A.A.A.F.<img src="http://pt.seaicons.com/wp-content/uploads/2016/09/Mimetypes-image-x-generic-icon.png"></a></span><spanclass="glyphicon glyphicon-remove"></span>
<span class="atletica-icone fonte-texto">
<a href="#"><img src="http://pt.seaicons.com/wp-content/uploads/2016/09/Mimetypes-image-x-generic-icon.png">A.M.S.C.</a></span></div></div></li></ul></div></div></div><!--Controls--><aclass="left carousel-control" href="#carousel-small-table1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="right carousel-control" href="#carousel-small-table1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Próximo</span>
</a>
</div>
</div>
<hr class="col-xs-12 col-sm-10 col-sm-offset-1">
<div class="conjunto-tabela col-xs-12 col-sm-10 col-sm-offset-1">
<div class="col-xs-12 col-sm-7 tabela-pontos">
<h2 class="fonte-titulo">Grupo 2</h2>
<table border="1" class="col-xs-12 tabela-page fonte-texto">
<tr class="first-line"><!-- títulos -->
<td>Classificação</td>
<td class="item" title="Pontos">P</td>
<td class="item" title="Jogos" class="terca">J</td>
<td class="item" title="Vitórias">V</td>
<td class="item" title="Empates">E</td>
<td class="item" title="Derrotas">D</td>
<td class="item" title="Gols Pontuados">GP</td>
<td class="item" title="Gols Contra">GC</td>
<td class="item" title="Saldo de Gols">SG</td>
</tr>
<tr class="par"><!-- linha -->
<td>
<span>A.A.A.F.</span>
<span class="scale">2<span class="fa fa-arrow-up"></span></span>
</td>
<td class="item">2</td>
<td class="item">3</td>
<td class="item">4</td>
<td class="item">5</td>
<td class="item">6</td>
<td class="item">6</td>
<td class="item">6</td>
<td class="item">6</td>
</tr>
</table>
</div>
<!-- segundo carousel confrontos -->
<div id="carousel-small-table2" class="carousel slide col-xs-12 col-sm-5" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-xs-12">
<h3 class="fonte-titulo titulo-carousel-small">1ª Rodada</h3>
<ul>
<li>
<h3 class="fonte-titulo"><strong>Sex 6/jan </strong> Time - 20:00</h3>
<div class="fonte-texto div-center">
<span class="numeracao-tabela">1</span>
<div class="div-center atleticas-box">
<span class="atletica-icone fonte-texto">
<a href="#">A.A.A.F.<img src="http://pt.seaicons.com/wp-content/uploads/2016/09/Mimetypes-image-x-generic-icon.png"></a></span><spanclass="glyphicon glyphicon-remove"></span>
<span class="atletica-icone fonte-texto">
<a href="#"><img src="http://pt.seaicons.com/wp-content/uploads/2016/09/Mimetypes-image-x-generic-icon.png">A.M.S.C.</a></span></div></div></li><hr><li><h3class="fonte-titulo"><strong>Sex 6/jan </strong> Time - 20:00</h3>
<div class="fonte-texto div-center">
<span class="numeracao-tabela">2</span>
<div class="div-center atleticas-box">
<span class="atletica-icone fonte-texto">
<a href="#">A.A.A.F.<img src="http://pt.seaicons.com/wp-content/uploads/2016/09/Mimetypes-image-x-generic-icon.png"></a></span><spanclass="glyphicon glyphicon-remove"></span>
<span class="atletica-icone fonte-texto">
<a href="#"><img src="http://pt.seaicons.com/wp-content/uploads/2016/09/Mimetypes-image-x-generic-icon.png">A.M.S.C.</a></span></div></div></li></ul></div></div><!--itemactive--><divclass="item">
<div class="col-xs-12">
<h3 class="fonte-titulo titulo-carousel-small">2ª Rodada</h3>
<ul>
<li>
<h3 class="fonte-titulo"><strong>Sex 6/jan </strong> Time - 20:00</h3>
<div class="fonte-texto div-center">
<span class="numeracao-tabela">3</span>
<div class="div-center atleticas-box">
<span class="atletica-icone fonte-texto">
<a href="#">A.A.A.F.<img src="http://pt.seaicons.com/wp-content/uploads/2016/09/Mimetypes-image-x-generic-icon.png"></a></span><spanclass="glyphicon glyphicon-remove"></span>
<span class="atletica-icone fonte-texto">
<a href="#"><img src="http://pt.seaicons.com/wp-content/uploads/2016/09/Mimetypes-image-x-generic-icon.png">A.M.S.C.</a></span></div></div></li><hr><li><h3class="fonte-titulo"><strong>Sex 6/jan </strong> Time - 20:00</h3>
<div class="fonte-texto div-center">
<span class="numeracao-tabela">4 </span>
<div class="div-center atleticas-box">
<span class="atletica-icone fonte-texto">
<a href="#">A.A.A.F.<img src="http://pt.seaicons.com/wp-content/uploads/2016/09/Mimetypes-image-x-generic-icon.png"></a></span><spanclass="glyphicon glyphicon-remove"></span>
<span class="atletica-icone fonte-texto">
<a href="#"><img src="http://pt.seaicons.com/wp-content/uploads/2016/09/Mimetypes-image-x-generic-icon.png">A.M.S.C.</a></span></div></div></li></ul></div></div></div><!--Controls--><aclass="left carousel-control" href="#carousel-small-table2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="right carousel-control" href="#carousel-small-table2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Próximo</span>
</a>
</div>
</div>
</div><!-- item active -->
<div class="item">
<h2 class="fonte-titulo titulo-item-carousel">Fases Finais</h2>
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<img src="http://pt.seaicons.com/wp-content/uploads/2016/09/Mimetypes-image-x-generic-icon.png"></div></div><!--Controls--><aclass="left carousel-control" href="#carousel-table" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="right carousel-control" href="#carousel-table" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Próximo</span>
</a>
</div><!-- #carousel-table -->