it-swarm.com.de

Twitter Bootstrap-Karussell-Bilder mit unterschiedlicher Höhe verursachen springende Pfeile

Ich habe Bootstraps Karussellklasse verwendet und war bisher unkompliziert. Ein Problem, das ich hatte, ist, dass Bilder mit unterschiedlichen Höhen dazu führen, dass die Pfeile auf und ab springen, um sich an die neue Höhe anzupassen.

Dies ist der Code, den ich für mein Karussell verwende:

<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>

Das Problem wird auch in diesem jsfiddle veranschaulicht (Zugegeben nicht mein, ich habe dies auf einer separaten Frage gefunden, als ich versuchte, dieses Problem zu lösen!)

Meine Frage ist: Wie kann ich das Karussell zwingen, auf einer festen Höhe zu bleiben (zweites Miniaturbild in der Geige) und kleinere Bilder zentrieren, während die Bildunterschriften und der Pfeil relativ zum Karussell statisch gehalten werden?

57
steve-gregory

Es sieht so aus, als würde bootstrap less/CSS eine automatische Höhe erzwingen, damit das Bild nicht gedehnt wird, wenn sich die Breite ändern muss, um ansprechend zu sein. Ich habe es umgestellt, um die Breite automatisch zu machen und die Höhe festzulegen.

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

Ich definiere dann img mit einer Klasse peopleCarouselImg wie folgt:

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

Ich setze meine Höhe auf 225px. Ich lasse die Breite automatisch anpassen, um das Seitenverhältnis korrekt zu halten.

Das scheint für mich zu funktionieren.

75
jduprey

Versuchen Sie dies (ich verwende SASS ):

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

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

Sie können den .carousel in einen .container umschließen, wenn Sie möchten.

16
Khairul Anwar

Versuchen Sie es mit diesem jQuery-Code, der die Schiebehöhen von Bootstrap-Karussell normalisiert

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

Hier ist die Lösung, die für mich funktioniert hat; Ich habe es so gemacht, da der Inhalt im Karussell dynamisch aus vom Benutzer übermittelten Inhalt generiert wurde (daher konnten wir keine statische Höhe im Stylesheet verwenden).

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();
}

Technisch ist dies nicht ansprechbar, aber der on window resize verhält sich diesbezüglich für meine Zwecke.

4
SteJ

Die zuvor gegebene Lösung führt zu einer Situation, in der Bilder für die Karussellbox möglicherweise zu klein sind. Eine geeignete Lösung für das Problem des Aufstaus von Steuerelementen ist das Überschreiben von Bootstraps-CSS.

Originalcode:

.carousel-control {
top: 40%;
}

Überschreiben Sie die Variable mit einem festen Wert in Ihrem eigenen Stylesheet (in meinem Design 300px):

.carousel-control {
top: 300px;
}

Hoffentlich löst das Ihr Problem.

2
Oliveira

Fügen Sie dieses JavaScript in Ihre Fußzeile ein (nach dem Laden von jQuery):

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

Wenn Sie diese Arbeit mit Bildern jeder Höhe und ohne Festlegung der Höhe durchführen möchten, tun Sie dies einfach:

$('#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

In letzter Zeit teste ich diese CSS-Quelle für das Bootstrap-Karussell

Die auf 380 eingestellte Höhe sollte dem größten/höchsten angezeigten Bild entsprechen.

Bitte stimmen Sie diese Antwort basierend auf Usability-Tests mit dem folgenden CSS-Dank ab.

/* 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

Sie können diesen Code auch verwenden, um alle Karussellbilder anzupassen.

.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

Falls jemand fieberhaft googelt, um das springende Bilder-Karussell zu lösen, hat mir dies geholfen

.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

Diese jQuery-Funktion hat für mich am besten funktioniert. Ich verwende Bootstrap 4 in einem WordPress-Theme und habe die vollständige jQuery anstelle von jQuery Slim verwendet.

// 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();
});

Quelle:

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

0
createscape

Sie können diese Zeilen in der CSS-Datei verwenden:

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

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