javascript - hacer - slider con bootstrap 4

La imagen Bootstrap Carousel no se alinea correctamente

Question

Por favor, eche un vistazo a la siguiente imagen, estamos utilizando el carrusel de arranque para rotar las imágenes. Sin embargo, cuando el ancho de la ventana es grande, la imagen no se alinea correctamente con el borde.

Pero el ejemplo de carrusel proporcionado por bootstrap siempre funciona bien, sin importar el ancho de la ventana. Siguiendo el código

¿Alguien puede explicar por qué el carrusel se comporta de manera diferente? ¿Tiene esto algo que ver con Tamaño de imagen o falta alguna configuración de arranque?

<section id="carousel">
<div class="hero-unit span6 columns">
    <h2>Welcome to TACT !</h2>
    <div id="myCarousel" class="carousel  slide" >
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="item  active" >
            <img alt=""  src="/eboxapps/img/3pp-1.png">
            <div class="carousel-caption">
                <h4>1. Need a 3rd party jar?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-2.png">
            <div class="carousel-caption">
                <h4>2. Create Request</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-3.png">
            <div class="carousel-caption">
                <h4>3. What happens?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-4.png">
            <div class="carousel-caption">
                <h4>4. Status is Emailed</h4>
            </div>
        </div>
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>

Answer 1

¿Sus imágenes tienen exactamente un ancho de 460px como el span6? En mi caso, con diferentes tamaños de imagen, puse un atributo de altura en mis imágenes para asegurarme de que todas tienen la misma altura y el carrusel no cambia de tamaño entre las imágenes.

En su caso, intente establecer una altura para que la relación entre esta altura y el ancho de su carrusel-div interior sea la misma que la aspectRatio de sus imágenes

Answer 2

Con bootstrap 3, solo agregue las clases receptivas y centrales:

 <img class="img-responsive center-block" src="img/....jpg" alt="First slide">

Esto automáticamente cambia el tamaño de la imagen y centra la imagen.

Editar:

Con bootstrap 4, solo agrega la clase img-fluid

<img class="img-fluid" src="img/....jpg">

Answer 3

Creo que tengo una solución:

En su página personal de hojas de estilos, asigne el ancho y el alto para que coincidan con las dimensiones de su imagen.

Cree una "clase" separada adicional en ese div superior que se apropia del espacio con tramos ... (se muestra a continuación)

        <div class="span6 columns" class="carousel">
            <div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                <div class="item active">

Sin tocar el archivo bootstrap.css, en su propia hoja de estilo, llame al "carrusel" (¡o la etiqueta que elija) para que coincida con el ancho y alto de su foto original!

.carousel       {
            width: 320px;
            height: 200px;

}

Entonces, en mi caso, estoy usando imágenes pequeñas de 320x200 con el carrusel. Probablemente haya dimensiones preestablecidas en bootstrap.css, pero no me gusta cambiar eso para poder mantenerme actualizado con versiones futuras. Espero que esto ayude ~~

Answer 4

Enfrenté el mismo problema y lo resolví de esta manera: es posible insertar contenido sin imágenes en el carrusel, para que podamos usarlo. Primero debe insertar div.inner-item (donde hará la alineación central), y luego insertar la imagen dentro de este div.

Aquí está mi código (Ruby):

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <%= image_tag "couples/1.jpg" %>
        </div> 
        <% (2..55).each do |t|%>
            <div class="item">
                <div class=''inner-item''>
                    <%= image_tag "couples/#{t}.jpg" %>
                </div>
            </div> 
        <% end -%>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Y mi css-code (.scss):

.inner-item {
    text-align: center;
    img {
        margin: 0 auto;
    }
}

Answer 5

Estoy enfrentando el mismo problema contigo. Basado en la pista de @thuliha, los siguientes códigos han resuelto mis problemas.

En el archivo html , modifique como la siguiente muestra:

<img class="img-responsive center-block" src=".....png" alt="Third slide">

En carousel.css , modifique la clase:

.carousel .item {
  text-align: center;
  height: 470px;
  background-color: #777;
}

Answer 6

Inserta esto en la clase css parent div donde está tu carrusel.

<div class="parent_div">
     <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
              <div class="item active">
                <img src="assets/img/slider_1.png" alt="">
                <div class="carousel-caption">
                </div>
              </div>
            </div>
     </div>      
</div>

CSS

.parent_div { 
margin: 0 auto;
min-width: [desired width];
max-width: [desired width];
}

Answer 7

La solución de @Art L. Richards no funcionó. ahora en bootstrap.css, el código original se ha vuelto así.

.carousel .item > img {
  display: block;
  line-height: 1;
}

El código de @ rnaka530 rompería la característica fluida de bootstrap.

No tengo una buena solución pero la solucioné. Observé cuidadosamente el ejemplo del carrusel del bootstrap http://twitter.github.com/bootstrap/javascript.html#carousel .

Descubrí que el ancho de img debe ser mayor que el ancho de la cuadrícula. En span9 , el ancho es de hasta 870px, por lo que debe preparar una imagen de más de 870px. Si tiene más contenedor fuera del img, como todo el contenedor tiene borde o margen, puede usar una imagen con un ancho menor.

Answer 8

La solución es poner ese código CSS en su archivo css personalizado

.carousel-inner > .item > img { margin: 0 auto; }

Answer 9

Mientras que la respuesta de vekozlov funcionará en Bootstrap 3 para centrar su imagen, se romperá cuando el carrusel se reduzca: la imagen conserva su tamaño en lugar de reducirse con el carrusel.

En cambio, haz esto en la div carrusel de nivel superior:

<div id="my-carousel" class="carousel slide"
    style="max-width: 900px; margin: 0 auto">
    ...
</div>

Esto centrará todo el carrusel y evitará que crezca más allá del ancho de tus imágenes (es decir, 900 px o lo que quieras configurar). Sin embargo, cuando el carrusel se reduce, las imágenes se reducen.

Deberías poner esta información de estilo en tu archivo CSS / LESS, por supuesto.

Answer 10

Para el carrusel, creo que todas las imágenes tienen que ser exactamente del mismo ancho y alto.

Además, cuando vuelvas a consultar la página de andamios de bootstrap, estoy bastante seguro de que span16 = 940px. Con esto en mente, creo que podemos suponer que si tiene un

<div class="row">
     <div class="span4"> 
        <!--left content div guessing around 235px in width -->
     </div>
     <div class="span8">
        <!--right content div guessing around 470px in width -->
     </div>
</div>

Así que sí, debes tener cuidado al establecer el espacio de los tramos dentro de una fila, porque si el ancho de la imagen es demasiado grande, enviará tu div a la siguiente "fila" y eso no es divertido: P

Enlace 1

Answer 11

Podría tener algo que ver con tus estilos. En mi caso, estoy usando un enlace dentro del div principal del "elemento", así que tuve que cambiar mi hoja de estilo para decir lo siguiente:

.carousel .item a > img {
  display: block;
  line-height: 1;
}

bajo el código boostrap preexistente:

.carousel .item > img {
  display: block;
  line-height: 1;
}

y mi imagen se ve así:

<div class="active item" id="2"><a href="http://epdining.com/eats.php?place=TestRestaurant1"><img src="rimages/2.jpg"></a><div class="carousel-caption"><p>This restaurant is featured blah blah blah blah blah.</p></div></div>

Answer 12

Prueba esto

    .item img{
      max-height: 300px;
      margin: auto;
    }