Щебетать Карусель с бутстрапом разных высотных изображений вызывает прыгающие стрелки

Ответ 1

Похоже, что bootstrap less/CSS создает автоматическую высоту, чтобы избежать растягивания изображения, когда ширина должна измениться, чтобы быть отзывчивой. Я переключил его, чтобы сделать ширину авто и зафиксировать высоту.

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

Затем я определяю img с классом peopleCarouselImg следующим образом:

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

Я фиксирую свою высоту до 225 пикселей. Я позволяю ширине автоматически регулировать, чтобы соотношение сторон было правильным.

Кажется, это работает для меня.

Ответ 2

Попробуйте (я использую SASS):

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

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

Вы можете обернуть .carousel в .container, если хотите.

Ответ 3

Попробуйте использовать этот код jQuery, который нормализует высоту карусели 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 
    });
  }
}

Ответ 4

Вот решение, которое сработало для меня; Я сделал это так, потому что контент в карусели динамически генерировался из контента, представленного пользователем (поэтому мы не могли использовать статическую высоту в таблице стилей). Это решение также должно работать с экранами разного размера:

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

Технически это не реагирует, но для моих целей on window resize заставляет это вести себя отзывчиво.

Ответ 5

Решение, приведенное выше, приводит к ситуации, когда изображения могут быть слишком маленькими для коробки с каруселями. Правильное решение проблемы управления bumping - переопределить Bootstraps CSS.

Исходный код:

.carousel-control {
top: 40%;
}

Переопределите переменную с фиксированным значением внутри вашей собственной таблицы стилей (300 пикселей работали в моем дизайне):

.carousel-control {
top: 300px;
}

Надеюсь, это решит вашу проблему.

Ответ 6

Если вы хотите, чтобы эта работа с изображениями любой высоты и без фиксации высоты, просто выполните следующее:

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

Ответ 7

Совсем недавно я тестирую этот источник CSS для карусели Bootstrap

Высота, установленная на 380, должна быть установлена ​​равной наибольшему/наивысшему отображаемому изображению...

Прошу проголосовать за этот ответ, основанный на тестировании юзабилити, с благодарностью за CSS.

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

}

Ответ 8

Включите этот JavaScript в нижний колонтитул (после загрузки jQuery):

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

Ответ 9

В случае, если кто-то лихорадочно ищет Google, чтобы решить эту проблему, это помогло мне:

.fusion-carousel .fusion-carousel-item img {
    width: auto;
    height: 146px;
    max-height: 146px;
    object-fit: contain;
}

Ответ 10

Вы можете использовать эти строки в файле css:

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

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

Ответ 11

 .className{
 width: auto;
  height: 200px;
  max-height: 200px;
   max-width:200px
   object-fit: contain;
}

Ответ 12

Эта функция jQuery работала лучше всего для меня. Я использую bootstrap 4 в теме WordPress, и я использовал полный jQuery вместо 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();
});

Источник:

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

Ответ 13

Вы также можете использовать этот код для настройки ко всем изображениям карусели.

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