Problema com Carousel Bootstrap dentro de outro


(Iracy Maria Neves) #1

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 -->

(Robson Vital) #2

Pelo o que deu para perceber é que quando você clica nas setas de navegação no slide maior ele remove a classe active do slide interno.

Creio eu que será preciso achar outra forma de criar o slide maior.