Estou implementando um carrossel de cards usando Bootstrap 5.
O carrossel está montado corretamente com:
Um container .carousel-inner contendo múltiplos .carousel-item.
Apenas o primeiro .carousel-item com a classe active.
Botões de "próximo" e "anterior" funcionando.
O problema é o seguinte: Quando clico para mudar de card, o segundo card até aparece por um momento, mas logo o carrossel volta automaticamente para o primeiro card. Parece que o primeiro card está fixo ou o carrossel está resetando para o início toda vez. O botão está funcionando, não é problema de clique.
Já revisei: 1 - Estrutura HTML correta 2 - data-bs-ride="carousel" no container do carrossel. 3 - Bootstrap CSS e JS estão corretamente carregados.
Alguém pode me ajudar?
Envio o código aqui:
<section class="container-avaliacoes">
<h3 class="text-center texto-avaliacoes">Avaliações</h3>
<div id="carouselExampleRide" class="carousel slide carrousel-custom" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active d-flex justify-content-center p-3">
<div class="card card-avalicao" style="max-width: 510px;">
<div class="row g-0">
<div class="col-4 d-flex flex-column align-items-center justify-content-center">
<img src="https://avatars.githubusercontent.com/u/174916340?v=4"
class="img-avaliacao" alt="">
</div>
<div class="col-8">
<div class="card-body">
<h5 class="card-title">Augusto Bruno Menezes</h5>
<p class="card-text mb-0">This is a wider card with supporting text below as a
natural lead-in to additional content. This content is a little bit longer.
</p>
<div class="estrelas-avaliacao mb-2 d-flex">
<i class="bi bi-star-fill estrela-icon-avaliacao"></i>
<i class="bi bi-star-fill estrela-icon-avaliacao"></i>
<i class="bi bi-star-fill estrela-icon-avaliacao"></i>
<i class="bi bi-star-fill estrela-icon-avaliacao"></i>
</div>
<p class="card-text"><small class="text-body-secondary">Postado há 2 minutos
atrás</small></p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item d-flex justify-content-center p-3">
<div class="card card-avalicao" style="max-width: 510px;">
<div class="row g-0">
<div class="col-4 d-flex flex-column align-items-center justify-content-center">
<img src="https://avatars.githubusercontent.com/u/174916340?v=4"
class="img-avaliacao" alt="">
</div>
<div class="col-8">
<div class="card-body">
<h5 class="card-title">Augusto Bruno</h5>
<p class="card-text mb-0">This is a wider card with supporting text below as a
natural lead-in to additional content. This content is a little bit longer.
</p>
<div class="estrelas-avaliacao mb-2 d-flex">
<i class="bi bi-star-fill estrela-icon-avaliacao"></i>
</div>
<p class="card-text"><small class="text-body-secondary">Postado há 2 minutos
atrás</small>
</p>
</div>
</div>
</div>
</div>
</div>
