Foros del Web » Creando para Internet » CSS »

Insertar fondo dentro de Carrousel

Estas en el tema de Insertar fondo dentro de Carrousel en el foro de CSS en Foros del Web. Hola a todos,.! Tengo un clásico carrusel de boostrap 4, y anda de 10, el problema es que no ocupa todo el ancho de mi ...
  #1 (permalink)  
Antiguo 20/06/2019, 12:20
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 871
Antigüedad: 16 años, 7 meses
Puntos: 7
Pregunta Insertar fondo dentro de Carrousel

Hola a todos,.!
Tengo un clásico carrusel de boostrap 4, y anda de 10, el problema es que no ocupa todo el ancho de mi pantalla, deja los espacios en cada lado, si al conteneor le pongo
container-fluid, las imágenes se me distorcionan,....

quisiera saber como hago para que el contenedor ocupe todo el ancho de mi monitor , pero no así las imagen, así podre agregarle un color de fondo..

dejo código:

Código HTML:
Ver original
  1. <div class="container">
  2. <div id="carousel-example-1z" class="col-12 carousel slide carousel-fade ca" data-ride="carousel">
  3.     <!--Indicators-->
  4.     <ol class="carousel-indicators">
  5.       <li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li>
  6.       <li data-target="#carousel-example-1z" data-slide-to="1"></li>
  7.       <li data-target="#carousel-example-1z" data-slide-to="2"></li>
  8.     </ol>
  9.     <!--/.Indicators-->
  10.     <!--Slides-->
  11.     <div class="carousel-inner" role="listbox">
  12.       <!--First slide-->
  13.       <div class="carousel-item active">
  14.         <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg"
  15.          alt="First slide" style="height: 300px">
  16.       </div>
  17.       <!--/First slide-->
  18.       <!--Second slide-->
  19.       <div class="carousel-item">
  20.         <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg"
  21.          alt="Second slide" style="height: 300px">
  22.       </div>
  23.       <!--/Second slide-->
  24.       <!--Third slide-->
  25.       <div class="carousel-item">
  26.         <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg"
  27.          alt="Third slide" style="height: 300px">
  28.       </div>
  29.       <!--/Third slide-->
  30.     </div>
  31.     <!--/.Slides-->
  32.     <!--Controls-->
  33.     <a class="carousel-control-prev" href="#carousel-example-1z" role="button" data-slide="prev">
  34.       <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  35.       <span class="sr-only">Previous</span>
  36.     </a>
  37.     <a class="carousel-control-next" href="#carousel-example-1z" role="button" data-slide="next">
  38.       <span class="carousel-control-next-icon" aria-hidden="true"></span>
  39.       <span class="sr-only">Next</span>
  40.     </a>
  41.     <!--/.Controls-->
  42.   </div>
  43.   <!--/.Carousel Wrapper-->
  44. </div>


Muchas gracias por su ayuda.

Saludos cordiales a todos.!
fede

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:18.