4

Cuando le doy a cualquiera de los controladores pasa a la siguiente y a su vez, retrocede a la primera imagen. He comprobado que no son los enlaces de Bootstrap y el HTML es un copia y pega del mismo, lo que falla es en el CSS la clase producto, el display:inline-flex, pero no sé cómo hacerlo sin él, porque necesito hacer esa misma disposición.

He probado a hacer el mismo sin CSS y funciona perfectamente, pero necesito que esté dispuesto de esa forma.

HTML y CSS

/* Carousel */
/* Change the size of the carousel */
.carousel-item.producto {
    min-height: 900px;
}
.producto {
    /* Color de fondo */
    background-color: #f4feff;
    /* Posicionamiento de las imágenes*/
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 30px;
    margin-top: -150px;
    position: absolute;
}
/*  Images of the carrousel */
.producto > img {
    /* Le quitamos el espacio entre ellas */
    margin: 0 !important;
    background-size: contain;
}
/* Card positions */
.card-body {
    position: absolute;
    align-self: flex-end;
    clear: both;
}
.c1 {
    margin-left: -500px; 
}
.c1 > a{
    margin-left: 70px;
}
.c2 > a{
    margin-left: 15px;
}
.c2 {
    margin-left: 495px;
}
.c1,.c2 {
    bottom: 70px !important;
}
/* Height of carousel controls*/
.carousel-control-prev, .carousel-control-next {
    height: 800px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./prueba.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>

    <div id="carouselExample" class="carousel carousel-dark slide">
        <div class="carousel-inner">

            <div class="carousel-item active producto">
                <img class="d-block mx-auto img-fluid col-md-4 col-6" src="https://www.w3schools.com/bootstrap/la.jpg"
                    height="400" width="530">
                <div class="card-body c1">
                    <h4 class="card-title">Nezuko Kamado kimetsu No Yaiba</h4>
                    <p class="card-text">35.99 €</p>
                    <a href="#" class="btn btn-primary text-center">Add to basket</a>
                </div>
                <img class="d-block mx-auto img-fluid col-md-4 col-6" src="https://www.w3schools.com/bootstrap/ny.jpg"
                    height="400" width="530">
                <div class="card-body c2">
                    <h4 class="card-title">Izuku Midoriya Boku no Hero Academia</h4>
                    <p class="card-text">29.00 €</p>
                    <a href="#" class="btn btn-primary text-center">Add to basket</a>
                </div>
            </div>

            <!-- Siguiente transición -->
            <div class="carousel-item producto">
                <img class="d-block col-md-4 col-6" src="https://www.w3schools.com/bootstrap/chicago.jpg" height="400"
                    width="400">
                <div class="card-body c1">
                    <h4 class="card-title">Póster de la película Your Name</h4>
                    <p class="card-text">5.00 €</p>
                    <a href="#" class="btn btn-primary text-center">Add to basket</a>
                </div>

                <img class="d-block col-md-4 col-6" src="https://www.w3schools.com/bootstrap/chicago.jpg" height="400"
                    width="400">
                <div class="card-body c2">
                    <h4 class="card-title">Póster Made in Abyss</h4>
                    <p class="card-text">10.00 €</p>
                    <a href="#" class="btn btn-primary text-center">Add to basket</a>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
    crossorigin="anonymous"></script>

1 respuesta 1

4

Es que en realidad no está retrocediendo al primer slide: de hecho, primero se está mostrando el segundo slide. Esto puede notarse de dos maneras: a través del HTML, por el div con clase active (que no corresponde al primer slide mostrado al ejecutar el código), y porque la no-transición se da con números pares, ej.: la primera vez que se clica el botón de navegación pareciera ser que no se mueve (pero en realidad sí se está mostrando el slide que corresponde), y la segunda vez que se clica sí se da el "efecto rebote" descrito en la pregunta.

Hay muchos errores en el código... Es por eso que hay que entender cómo funcionan los componentes de Bootstrap.


Resumen de los cambios hechos: toca reescribir código.

  • Las col no funcionan sin row... (Al traducir tiene más sentido: las columnas no funcionan si no están ubicadas en un fila.) Es más sencillo notarlo en tamaños de pantalla relacionados a móviles, por el desorden. En este caso, se movieron las clase col-6 y col-md-4 del img y se agregó un div de clase row, que contiene a su vez un div con la clase mencionada. Para que la fila quede centrada, se agregó la clase justify-content-center.

  • Los card-body deben ubicarse dentro de una card. En el código presentado, "están flotando". Probablemente las imágenes son también parte de la card (salvo se indique lo contrario). De todos modos, tanto los div con la clase card-body como las imágenes inmediatamente superiores, fueron movidas a unos div de clase card.

  • A las img se les agregó la clase card-img-top, para que ellas abarquen todo el ancho del card que las contiene, y rounded-0, para que la imagen no aparezca con las esquinas redondeadas.

  • A tales card también se les agregó la clase producto. En lugar de

.producto > img {
    margin: 0 !important;
    background-size: contain;
}

ahora aparece

.producto > img {
    object-fit: cover;
}

El espaciado entre una card y otra se manejará de otra manera, es por eso que se removió la propiedad margin. En lugar de repetir la imagen para cubrir el espacio sobrante, se removió la propiedad background-size: contain. En su lugar, se agregó la propiedad object-fit: cover, para que cuando el tamaño de la card sea menor a la imagen, esta última "conserve su centro" en lugar de "aplastarse".

  • El margin previamente removido fue reemplazado: se agregó al div con la clase col-6 la clase pe-0 (padding end) para el ítem de la izquierda, y la clase ps-0 (padding start) para el ítem de la derecha.

  • Para eliminar el color blanco de card, se agregó un background transparente, de la siguiente manera:

.card.producto{
    background-color: transparent;
}
  • Para eliminar el borde de cada card, se les agregó la clase border-0.

  • El padding de 30px fue movido a la clase row.

  • El margin-top se modificó de -150px a un padding-top de 120px (es arbitrario.)

.producto>img {
  object-fit: cover;
}

.carousel-item {
  background-color: #f4feff;
}

.card.producto {
  background-color: transparent;
}

.carousel-item.producto {
  min-height: 900px;
}

.row {
  padding: 30px;
  padding-top: 120px;
}

.c1>a {
  margin-left: 70px;
}

.c2>a {
  margin-left: 15px;
}

.c1,
.c2 {
  bottom: 70px !important;
}


/* Height of carousel controls*/

.carousel-control-prev,
.carousel-control-next {
  height: 800px;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="./prueba.css" rel="stylesheet" type="text/css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>

  <div id="carouselExample" class="carousel carousel-dark slide">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="row justify-content-center">
          <div class="col-6 col-md-4 pe-0">
            <div class="card producto border-0">
              <img class="card-img-top rounded-0" src="https://www.w3schools.com/bootstrap/la.jpg" alt="" height="400" width="530">
              <div class="card-body c1">
                <h4 class="card-title">Nezuko Kamado kimetsu No Yaiba</h4>
                <p class="card-text">35.99 €</p>
                <a href="#" class="btn btn-primary text-center">Add to basket</a>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-4 ps-0">
            <div class="card producto border-0">
              <img class="card-img-top rounded-0" src="https://www.w3schools.com/bootstrap/ny.jpg" alt="" height="400" width="530">
              <div class="card-body c2">
                <h4 class="card-title">Izuku Midoriya Boku no Hero Academia</h4>
                <p class="card-text">29.00 €</p>
                <a href="#" class="btn btn-primary text-center">Add to basket</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Siguiente transición -->
      <div class="carousel-item">
        <div class="row justify-content-center">
          <div class="col-6 col-md-4 pe-0">
            <div class="card producto border-0">
              <img class="card-img-top rounded-0" src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="" height="400" width="400">
              <div class="card-body c1">
                <h4 class="card-title">Póster de la película Your Name</h4>
                <p class="card-text">5.00 €</p>
                <a href="#" class="btn btn-primary text-center">Add to basket</a>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-4 ps-0">
            <div class="card producto border-0">
              <img class="card-img-top rounded-0" src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="" height="400" width="400">
              <div class="card-body c2">
                <h4 class="card-title">Póster Made in Abyss</h4>
                <p class="card-text">10.00 €</p>
                <a href="#" class="btn btn-primary text-center">Add to basket</a>
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>

    <!-- Controls -->
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>

</html>

Como podrá notarse, la sección de CSS quedó mucho más corta, delegándose la mayor parte de las modificaciones a las clases que provee el propio Bootstrap.
Para comprender cómo funciona cada clase agregada, hay que visitar y leer la documentación.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.