Carousel todas as imagens uma em baixo da outra

4 de março de 2018 6 respostas

Thallysson 4 de março de 2018

Boa noite pessoal, eu estou tentando exibir um Carousel com o Bootstrap, só que está simplesmente ficando uma imagem em baixo da outra. Código:

gist.github.com

https://gist.github.com/ThallyssonKlein/81d40f49b03bbd507bf02ef7ca705742

carousel.html

<main id="body" style="padding-top: 150px;"><div class="row">
    <div class="col-md-12">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                
                <div class="active item" data-slide-number="0">
                    <img src="static/hqPages/KvqIw0Ftg3cYE73Y2I9M_eroc_vol1_capa.png" class="img-fluid d-block">
                </div>
                <div class="item" data-slide-number="1"><img src="static/hqPages/Gx7uVknuQahpho29qQRF_eroc_vol1_pg01.png" class="img-fluid d-block"></div><div class="item" data-slide-number="2"><img src="static/hqPages/NAwNuL7RE85YPTu6OTrJ_eroc_vol1_pg02.png" class="img-fluid d-block"></div><div class="item" data-slide-number="3"><img src="static/hqPages/fJzOhH2ZsAGSf9qMAqff_eroc_vol1_pg03.png" class="img-fluid d-block"></div><div class="item" data-slide-number="4"><img src="static/hqPages/O5sTDoRrjNwc7zFf7gXm_eroc_vol1_pg04.png" class="img-fluid d-block"></div><div class="item" data-slide-number="5"><img src="static/hqPages/WokypaJNH4yAyCiCc4CU_eroc_vol1_pg05.png" class="img-fluid d-block"></div><div class="item" data-slide-number="6"><img src="static/hqPages/WHm9p57YQxpqLW9lvyED_eroc_vol1_pg06.png" class="img-fluid d-block"></div><div class="item" data-slide-number="7"><img src="static/hqPages/oku1gaDj7QqbwluhU8Ex_eroc_vol1_pg07.png" class="img-fluid d-block"></div><div class="item" data-slide-number="8"><img src="static/hqPages/DbmvyGsZDOg78RGyZyMZ_eroc_vol1_pg08.png" class="img-fluid d-block"></div><div class="item" data-slide-number="9"><img src="static/hqPages/tVrASVfV4uLlmN1lcfAm_eroc_vol1_pg09.png" class="img-fluid d-block"></div><div class="item" data-slide-number="10"><img src="static/hqPages/aMg6DAfiIUHGwoSz32EG_eroc_vol1_pg10.png" class="img-fluid d-block"></div><div class="item" data-slide-number="11"><img src="static/hqPages/K6bf64jVlmDweQfwoOEo_eroc_vol1_pg11.png" class="img-fluid d-block"></div><div class="item" data-slide-number="12"><img src="static/hqPages/yELfSVwETVbWMrboABEr_eroc_vol1_pg12.png" class="img-fluid d-block"></div><div class="item" data-slide-number="13"><img src="static/hqPages/ikFOvDhI0WJxAIAkXCfM_eroc_vol1_pg13.png" class="img-fluid d-block"></div><div class="item" data-slide-number="14"><img src="static/hqPages/aPxMoz7DOpfjPGOi2rQz_eroc_vol1_pg14.png" class="img-fluid d-block"></div><div class="item" data-slide-number="15"><img src="static/hqPages/YqlK8aFbT04aVHtQTifX_eroc_vol1_pg15.png" class="img-fluid d-block"></div>
            </div>

This file has been truncated. show original

master.css

.selected img {
    opacity:0.5;
}

master.js

            $('#myCarousel').carousel({
                	interval:   4000
            });
            $('[id^=carousel-selector-]').click( function(){
                var id_selector = $(this).attr("id");
                var id = id_selector.substr(id_selector.length -1);
                id = parseInt(id);
                $('#myCarousel').carousel(id);
                $('[id^=carousel-selector-]').removeClass('selected');
                $(this).addClass('selected');

This file has been truncated. show original

Alguém tem ideia do que eu fiz de errado?

6 Respostas

STNeto 4 de mar. de 2018

O W3Schools tem uma página explicando como fazer um carrossel com Bootstrap, aqui o link da página.

Thallysson 4 de mar. de 2018

Cara, eu não criaria um tópico desses sem pelo menos pesquisar como fazer isso…eu olhei o exemplo…não vi diferença de como eu fiz.

javaflex 4 de mar. de 2018 1 like

Você pode ter feito algo de diferente, pois o exemplo que ele passou funciona, nao fica um embaixo da outra: https://jsfiddle.net/0orLk9Ld/

Posta no https://jsfiddle.net seu código reproduzindo o problema, assim facilita quem puder te ajudar.

Thallysson 4 de mar. de 2018

Ficou diferente mas tá com erro também: https://jsfiddle.net/jdmrjx8t/1/

javaflex 4 de mar. de 2018

Está diferente. Se for se basear no exemplo do W3Schools vai conseguir fazer. A partir daí voce personaliza aos poucos com o básico já funcionando, onde qualquer sinal de quebra você vai saber o que fez.

Thallysson 5 de mar. de 2018

Eu analisei todo o código de novo só para ter certeza absoluta de dizer novamente que meu código está igual. Posso garantir que o problema não é eu deixar de usar os indicators para usar thumbs. Um detalhe que eu achei desnecessário, mas agora estou vendo que provavelmente o problema vem daí…eu não estou inserindo esse código diretamente na minha página…é feita uma requisição via ajax para um webservice que constrói esse carousel e devolve, o ajax pega essa resposta e insere na página, mas o código gerado é esse, sem erro algum. Estou começando a desconfiar que o problema é que o bootstrap.css não está sendo aplicado nesse código que é adicionado depois. O estranho é que o master.css onde eu coloco meus estilos está funcionando perfeitamente. Eu tentei inclusive adicionar nessa resposta uma tag link via cdn para o bootstrap.css, mas não adiantou.

Criado 4 de março de 2018

Ultima resposta 5 de mar. de 2018

Respostas 6

Participantes 3

6 Respostas

Topicos relacionados