0
Please, I haven’t got the solution yet:
I created a bootstrap Carousel with Divs and another smaller Carousel inside together. When I pass the larger Carousel (which encompasses everything) and return to the item that has the smaller Carousel, the contents of that smaller Carousel add up.
I’ve taken care to check if there were any open tags but everything is ok.
May be missing some attribute?
Follows 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>
<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 -->
You can put html sff, or a functional jsfiddle https://jsfiddle.net/
– Miguel
Show. It is difficult (or impossible) to deduce things from reports. Without seeing the code we can only guess, and this does not help.
– ShutUpMagda
Sorry! I will post a snippet with html. Sorry
– PyMaria
Possible duplicate of https://answall.com/questions/179559/carousel-bootstrap-um-dentro-do-outro-n%C3%A3o-works-right
– Wilker