Saltar al contenido

¿Cómo cambiar el color de fondo del complemento carrusel de Bootstrap?

Solución:

El problema que tienes en este momento es que el carrusel tiene aplicada la clase de contenedor y, por lo tanto, está agregando un ancho fijo al elemento. El blanco que ves a cada lado es en realidad el color de fondo del cuerpo.

Hay dos formas de evitar esto (he acortado el código para el ejemplo):

Ancho completo

<!-- Remove the container class from the slides div -->
<div id="slides">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->

        <!-- Wrapper for slides -->

        <!-- Left and right controls -->

    </div>
</div>

Ancho de la imagen (muestra un fondo gris)

<!-- Wrap carousel-inner in a container div -->
<div id="slides">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->

        <!-- Wrapper for slides -->
        <div class="container"> <!-- Added this line -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://lorempixel.com/1280/960" alt="Connect K project" style="width:100%;">
                </div>

                <div class="item">
                    <img src="http://lorempixel.com/1280/960" alt="Chicago" style="width:100%;">
                </div>

                <div class="item">
                    <img src="http://lorempixel.com/1280/960" alt="MedAppJam project" style="width:100%;">
                </div>
            </div>
        </div> <!-- Added this line -->

        <!-- Left and right controls -->

    </div>
</div>

He bifurcado su codepen para un ejemplo: https://codepen.io/raptorkraine/pen/Gvaagm?editors=1100#0

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *