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:
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>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');show original
Alguém tem ideia do que eu fiz de errado?
STNeto
Março 4, 2018, 1:23am
#2
O W3Schools tem uma página explicando como fazer um carrossel com Bootstrap, aqui o link da página .
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.
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.
1 curtida
Ficou diferente mas tá com erro também: https://jsfiddle.net/jdmrjx8t/1/
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.
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.