Olá! Por favor, ainda não consegui a solução:
Criei um carousel bootstrap com divs e outro carousel menor dentro junto. Quando eu passo o carousel maior (o que engloba tudo) e volto para o item que tem o carousel menor, o conteúdo desse carousel menor some.
Já tomei todo o cuidado de verificar se tinha alguma tag aberta mas está tudo ok.
Pode estar faltando algum atributo?
Segue o 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>
<script src="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>
<span class="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>
<h3 class="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>
<span class="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><!-- item active -->
<div class="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>
<span class="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>
<h3 class="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>
<span class="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 -->
<a class="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>
<span class="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>
<h3 class="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>
<span class="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><!-- item active -->
<div class="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>
<span class="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>
<h3 class="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>
<span class="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 -->
<a class="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 -->
<a class="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 -->