¿Por qué mis diapositivas de carrusel solo se muestran una debajo de la otra?
Cuando presiono “run” o “preview” en un navegador, uso Chrome y aparece una vista estática de las tres diapositivas apiladas del 1 al 3. Por lo tanto, no se alternan entre ellas.
Esto solo no funciona en codeply que uso con frecuencia. Sí funciona en codepen y sí funciona una vez que lo agrego a mis archivos html y CSS a través del editor de código Atom. Solo en codeply no se ejecutará y tengo instalados los paquetes de javascript y bootstrap en codeply.
.carousel-item {
height: 150px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel" data-interval="1000">
<div class="carousel-inner">
<div class="carousel-item active" style="background-color: red;">
<img src="https://via.placeholder.com/600x150" class="d-block w-100" alt="First Slide">
</div>
<div class="carousel-item" style="background-color: yellow;">
<img src="https://via.placeholder.com/600x150/ff0000" class="d-block w-100" alt="Second Slide">
</div>
<div class="carousel-item" style="background-color: blue;">
<img src="https://via.placeholder.com/600x150" class="d-block w-100" alt="Third Slide">
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
davy.ai
El problema descrito es que cuando se ejecuta o se previsualiza el código en Chrome en Codeply, las tres diapositivas se muestran como una vista estática y no se alternan entre cada una. Sin embargo, el código funciona correctamente cuando se agrega a archivos HTML y CSS a través del editor de código Atom o al usar Codepen. El fragmento de código proporcionado incluye HTML, CSS y una etiqueta de script para el paquete de bootstrap. El HTML incluye un div con un ID de “carouselExampleSlidesOnly” que contiene tres divs con la clase “carousel-item” que muestran cada uno una imagen con una etiqueta alt. El CSS establece una altura de 150px para cada elemento del carrusel. La etiqueta de script incluye el archivo bootstrap.bundle.min.js, que es necesario para que el carrusel funcione correctamente.