Carousel bootstrap one inside the other does not work right

Question

Carousel bootstrap one inside the other does not work right

Navigation

#1 by (1 votes)

0

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

bootstrap carousel

asked by anonymous 24.01.2017 / 15:56

1 answer

How to do an action in jquery expect another one to finish to start? Java Poi does not download

score 1 · Answer 1

From what I could see in the development repository here , here and here , the framework does not support this. Some people have managed to do things like this here: link and this here: #, which may give you an idea of how you can try.

But attention : Since there is no support for carousel within another carousel , you can not trust things like this to work according to the framework . You will always find difficulty in responsiveness, etc.