web-dev-qa-db-fra.com

Différentes images de hauteur du carrousel Twitter Bootstrap provoquent des flèches rebondissantes

J'utilise la classe de carrousel de Bootstrap et cela a été simple jusqu'à présent. Cependant, un problème que j'ai rencontré est que des images de différentes hauteurs font rebondir les flèches pour s'adapter à la nouvelle hauteur.

C'est le code que j'utilise pour mon carrousel:

<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item active">
            <img src="image_url_300height"/>
            <div class="carousel-caption">
                <h4>...</h4>
                <p>...</p>
            </div>
        </div>
        <div class="item">
            <img src="image_url_700height" />
        </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>

Le problème est également illustré dans ce jsfiddle ((Certes pas le mien, j’ai trouvé ceci sur une question distincte tout en essayant de résoudre ce problème!)

Ma question est la suivante: comment puis-je forcer le carrousel à rester à une hauteur fixe (deuxième vignette dans le violon) et à centrer des images plus petites tout en maintenant les légendes et la flèche dans une position statique par rapport au carrousel?

twitter-bootstrapcarousel
57
steve-gregory

Il semble que bootstrap less/CSS force une hauteur automatique pour éviter d’étirer l’image lorsque la largeur doit changer pour être sensible. Je l'ai basculé pour rendre la largeur automatique et fixer la hauteur.

<div class="item peopleCarouselImg">
  <img src="http://upload.wikimedia.org/...">
  ...
</div>

Je définis ensuite img avec une classe peopleCarouselImg comme ceci:

.peopleCarouselImg img {
  width: auto;
  height: 225px;
  max-height: 225px;
}

Je fixe ma taille à 225px. Je laisse la largeur s'ajuster automatiquement pour maintenir le rapport d'aspect correct.

Cela semble fonctionner pour moi.

75
jduprey

Essayez ceci (j'utilise SASS ):

.carousel {
  max-height: 700px;
  overflow: hidden;

  .item img {
    width: 100%;
    height: auto;
  }
}

Vous pouvez envelopper le .carousel dans un .container si vous le souhaitez.

16
Khairul Anwar

Essayez avec ce code jQuery qui normalise les hauteurs de diapositives du carrousel Bootstrap

function carouselNormalization() {
  var items = $('#carousel-example-generic .item'), //grab all slides
    heights = [], //create empty array to store height values
    tallest; //create variable to make note of the tallest slide

  if (items.length) {
    function normalizeHeights() {
      items.each(function() { //add heights to array
        heights.Push($(this).height());
      });
      tallest = Math.max.apply(null, heights); //cache largest value
      items.each(function() {
        $(this).css('min-height', tallest + 'px');
      });
    };
    normalizeHeights();

    $(window).on('resize orientationchange', function() {
      tallest = 0, heights.length = 0; //reset vars
      items.each(function() {
        $(this).css('min-height', '0'); //reset min-height
      });
      normalizeHeights(); //run it again 
    });
  }
}

10
Mile Mijatovic

Voici la solution qui a fonctionné pour moi; Je l'ai fait ainsi car le contenu du carrousel était généré dynamiquement à partir du contenu soumis par l'utilisateur (nous ne pouvions donc pas utiliser de hauteur statique dans la feuille de style).

function updateCarouselSizes(){
  jQuery(".carousel").each(function(){
    // I wanted an absolute minimum of 10 pixels
    var maxheight=10; 
    if(jQuery(this).find('.item,.carousel-item').length) {
      // We've found one or more item within the Carousel...
      jQuery(this).carousel(); // Initialise the carousel (include options as appropriate)
      // Now we iterate through each item within the carousel...
      jQuery(this).find('.item,.carousel-item').each(function(k,v){ 
        if(jQuery(this).outerHeight()>maxheight) {
          // This item is the tallest we've found so far, so store the result...
          maxheight=jQuery(this).outerHeight();
        }
      });
      // Finally we set the carousel's min-height to the value we've found to be the tallest...
      jQuery(this).css("min-height",maxheight+"px");
    }
  });
}

jQuery(function(){
  jQuery(window).on("resize",updateCarouselSizes);
  updateCarouselSizes();
}

Techniquement, cela n’est pas réactif, mais pour les besoins de notre on window resize, cela se comporte de manière réactive.

4
SteJ

La solution donnée précédemment conduit à une situation dans laquelle les images risquent d'être trop petites pour la boîte à carrousel. Une solution appropriée au problème de décalage des contrôles consiste à remplacer Bootstraps CSS.

Code original:

.carousel-control {
top: 40%;
}

Remplacez la variable par une valeur fixe dans votre propre feuille de style (300px travaillée dans ma conception):

.carousel-control {
top: 300px;
}

Espérons que cela résoudra votre problème.

2
Oliveira

Incluez ce JavaScript dans votre pied de page (après le chargement de jQuery):

$('.item').css('min-height',$('.item').height());
1
Ankit Shukla

Si vous voulez avoir ce travail avec des images de n'importe quelle hauteur et sans fixer la hauteur, procédez comme suit:

$('#myCarousel').on("slide.bs.carousel", function(){
     $(".carousel-control",this).css('top',($(".active img",this).height()*0.46)+'px');
     $(this).off("slide.bs.carousel");
});
1
awfullyawful

Plus récemment, je teste cette source CSS pour le carrousel Bootstrap

La hauteur réglée sur 380 doit être égale à la plus grande/plus grande image affichée ...

Veuillez voter cette réponse en fonction des tests d’utilisabilité avec les remerciements CSS suivants.

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  max-height: 100%;
  max-height: 380px;
  margin-bottom: 60px;
  height:auto;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
    background: rgba(0, 0, 0, 0.45);
}

/* Declare heights because of positioning of img element */
.carousel .item {
  max-height: 100%;
  max-height: 380px;
  background-color: #777;
}
.carousel-inner > .item > img {
 /*  position: absolute;*/
  top: 0;
  left: 0;
  min-width: 40%;
  max-width: 100%;
  max-height: 380px;
  width: auto;
  margin-right:auto;
  margin-left:auto;
  height:auto;

}
1
CrandellWS

Vous pouvez également utiliser ce code pour vous adapter à toutes les images du carrousel.

.carousel-item{
    width: 100%; /*width you want*/
    height: 500px; /*height you want*/
    overflow: hidden;
}
.carousel-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
1
MrAnyx

Dans le cas où quelqu'un est en train de goûter fébrilement à Google pour résoudre le problème des images rebondissantes, cela m'a aidé

.fusion-carousel .fusion-carousel-item img {
    width: auto;
    height: 146px;
    max-height: 146px;
    object-fit: contain;
}
1
Kyle Pennell
 .className{
 width: auto;
  height: 200px;
  max-height: 200px;
   max-width:200px
   object-fit: contain;
}
0
arvind audacious

Cette fonction jQuery a fonctionné le mieux pour moi. J'utilise bootstrap 4 dans un thème WordPress et j'ai utilisé l'intégralité de jQuery au lieu de jQuery slim.

// Set all carousel items to the same height
function carouselNormalization() {

    window.heights = [], //create empty array to store height values
    window.tallest; //create variable to make note of the tallest slide

    function normalizeHeights() {
        jQuery('#latest-blog-posts .carousel-item').each(function() { //add heights to array
            window.heights.Push(jQuery(this).outerHeight());
        });
        window.tallest = Math.max.apply(null, window.heights); //cache largest value
        jQuery('#latest-blog-posts .carousel-item').each(function() {
            jQuery(this).css('min-height',tallest + 'px');
        });
    }
    normalizeHeights();

    jQuery(window).on('resize orientationchange', function () {

        window.tallest = 0, window.heights.length = 0; //reset vars
        jQuery('.sc_slides .item').each(function() {
            jQuery(this).css('min-height','0'); //reset min-height
        }); 

        normalizeHeights(); //run it again 

    });

}

jQuery( document ).ready(function() {
    carouselNormalization();
});

La source:

https://Gist.github.com/mbacon40/eff3015fe96582806da5

0
createscape

Vous pouvez utiliser ces lignes dans le fichier css:

ul[rn-carousel] {
 > li {
 position: relative;
 margin-left: -100%;

 &:first-child {
   margin-left: 0;
   }
  }
}
0
Hetdev