0

Tengo un problema con el carousel de bootstrap 4, no puedo ajustarlo, no dispongo de tantos conocimientos en css, si alguien me puede orientar lo agradezco.

voy a dejar fragmento del código.

<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
    <div class="carousel-inner w-100" role="listbox">
        <div class="carousel-item row no-gutters active">
            <div class="col-3 float-left"><img class="img-fluid" src="img/suppliers/Tennant.png"></div>
            <div class="col-3 float-left"><img class="img-fluid" src="img/suppliers/PioneerEclipseLogo.jpg"></div>
            <div class="col-3 float-left"><img class="img-fluid" src="img/suppliers/bet.png"></div>
            <div class="col-3 float-left"><img class="img-fluid" src="img/suppliers/Kawasaki_Logo.jpg"></div>
        </div>
        <div class="carousel-item row no-gutters">
            <div class="col-3 float-left"><img class="img-fluid" src="img/suppliers/Aztec.png"></div>
            <div class="col-3 float-left"><img class="img-fluid" src="img/suppliers/advance.png"></div>
            <div class="col-3 float-left"><img class="img-fluid" src="img/suppliers/clarke.png"></div>
            <div class="col-3 float-left"><img class="img-fluid" src="img/suppliers/viper.png"></div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#recipeCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#recipeCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

ese es el código que estoy usando, voy a adjuntar unas fotos del problema que tengo.

introducir la descripción de la imagen aquí

se crea ese espacio en medio y las flechas para pasar el slider se pasan abajo. voy a dejar el link con parte del código, agradezco toda ayuda.

http://www.mediafire.com/file/aw5mqayz5nrif0s/subir.rar

Agradezco cualquier consejo amigos.

2
  • ¿Has comprobado el tamaño? A lo mejor tiene el height de un tamaño en específico y por eso se ve así. Prueba a darle un height determinado que vaya bien con el tamaño de tus imágenes
    – Rabegi
    el 20 jul. 2018 a las 8:05
  • Gracias, si era el problema de los height, en uno de mis estilos tenía uno de declarado. el 20 jul. 2018 a las 15:50

2 respuestas 2

0

El problema que te ocasiona este comportamiento es que en tu archivo modern-business.css tienes la clase .carousel-item con estas propiedades:

height: 150vh;
min-height: 300px;

Ahí estas declarando que tengan una altura mínima de 300px para los elementos, lo que deja un super espacio por la dimensión de tus imágenes. No se que tan necesario sea que lo declares así, si son necesarios las propiedades puedes ajustar los valores, sino los puedes omitir, ya sobre tu consideración. Espero te sirva.

1
  • Muchas gracias, ese era el error que tenía! el 20 jul. 2018 a las 15:49
0

no puedo dejar comentarios aún, pero te dejo por aquí una web con una guía para hacer un carousel con Bootstrap 4, que parece que es lo que estás usando ya que veo que pones por ejemplo "w-100" en el código.

https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp

1
  • Gracias voy a revisar manualmente paso a paso para aprender el 20 jul. 2018 a las 15:49

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.