Ползунок слайдера: поддерживая равную высоту для всех изображений при сохранении слайдера

В моем слайдере изображения JS (Owl-Carousel) изображения имеют разные размеры:

http://goo.gl/KmpX2P

enter image description here

Вы можете видеть, что высота изображения зависит от карусели. Как сделать его постоянным, сохраняя отзыв карусели? Мне нужны изображения, чтобы заполнять пространство ползунка во все времена, поэтому некоторые из них должны быть обрезаны через CSS. Желаемый результат выглядит следующим образом:

enter image description here

ОТВЕТЫ

Ответ 1

Он может быть указан в css.

Пример

http://jsfiddle.net/AwBLL/2/

.owl-carousel .owl-item{
    height:285px;
    width:100%;
}

ИЗМЕНИТЬ В следующем решении используются события обратного вызова плагина для изменения высоты окна просмотра/обертки в соответствии с наименьшей высотой изображения.

http://jsfiddle.net/DNMpF/1/

JS

$(document).ready(function () {

    $("#owl-example").owlCarousel({
        afterUpdate: function () {
            updateSize();
        },
        afterInit:function(){
            updateSize();
        }
    });
    function updateSize(){
        var minHeight=parseInt($('.owl-item').eq(0).css('height'));
        $('.owl-item').each(function () {
            var thisHeight = parseInt($(this).css('height'));
            minHeight=(minHeight<=thisHeight?minHeight:thisHeight);
        });
        $('.owl-wrapper-outer').css('height',minHeight+'px');
    }
});

CSS

.owl-carousel .owl-item img {
    height:auto;
    width:100%;
    display: block;
}

.owl-carousel .item {
    margin:0px;
}

EDIT2

Что касается последнего комментария, чтобы показать нижнюю часть больших изображений, одним из подходов может быть итерация изображений и добавление отрицательного верхнего поля, равного части скрытых изображений.

function updateSize(){
        var minHeight=parseInt($('.owl-item').eq(0).css('height'));
        $('.owl-item').each(function () {
            var thisHeight = parseInt($(this).css('height'));
            minHeight=(minHeight<=thisHeight?minHeight:thisHeight);
        });
        $('.owl-wrapper-outer').css('height',minHeight+'px');

        /*show the bottom part of the cropped images*/
        $('.owl-carousel .owl-item img').each(function(){
            var thisHeight = parseInt($(this).css('height'));
            if(thisHeight>minHeight){
                $(this).css('margin-top',-1*(thisHeight-minHeight)+'px');
            }
        });

    }

Ответ 2

Слайды со случайной высотой на http://jsfiddle.net/AwBLL/108/

HTML:

<h2>Vertical align</h2>
<div class="owl-carousel bg-contain">
  <img src="http://lorempixel.com/234/100/technics/1/"  />
  <img src="http://lorempixel.com/234/400/technics/2/"  />
  <img src="http://lorempixel.com/234/200/technics/9/"  />
  <img src="http://lorempixel.com/234/150/technics/10/" />
</div>

<h2>Full Zoom small images</h2>
<div class="owl-carousel bg-cover">
  <img src="http://lorempixel.com/234/100/technics/1/"  />
  <img src="http://lorempixel.com/234/400/technics/2/"  />
  <img src="http://lorempixel.com/234/200/technics/9/"  />
  <img src="http://lorempixel.com/234/150/technics/10/" />
</div>

CSS

.owl-wrapper-outer {
  border: 1px solid red;
  font: 0/0 a;
  line-height: 0;
}

.owl-carousel .owl-item {
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.bg-contain .owl-item { background-size: contain }
.bg-cover .owl-item { background-size: cover }

.owl-carousel .owl-item img {
  height: auto;
  width: 100%;
  visibility: hidden;
}

JS:

$(".owl-carousel").each(function () {
  var $this = $(this);

  $this.owlCarousel({
    afterUpdate: function () {
      updateSize($this);
    },
    afterInit: function () {
      updateSize($this);
    }
  });
});

function updateSize($carousel) {
  var maxHeight = 0;

  $('.owl-item', $carousel).each(function () {
    var $this = $(this);
    var $image = $this.find('img');

    //Max height
    var prevHeight = $this.height();
    var thisHeight = $this.height('auto').height();
    $this.height(prevHeight);
    maxHeight = (maxHeight > thisHeight ? maxHeight : thisHeight);

    //Set image as background
    var imageSource = $image.attr('src');
    $this.css('backgroundImage', 'url(' + imageSource + ')');
  });

  //Set equal height
  $('.owl-item', $carousel).height(maxHeight);
}

Ответ 3

если вы используете div с фоновым изображением в вашем caroual Вы можете попробовать контролировать размер фона с помощью свойства background-size.

#header {
 -webkit-background-size:100%;
 -moz-background-size:100%;
  background-size:100%;
  background-position: 0% 0%;
  background: url(http://i47.tinypic.com/2090r3c.jpg) no-repeat;
}

Или, если вы используете, вы можете использовать auto resize в соответствии с шириной контейнера

img {
 height: inherit; 
 max-height: 100%;

}

Ответ 4

Пожелайте, чтобы вы выложили скрипку, но с верхней части моего Notepad ++ вы могли бы попробовать поместить это внизу своей страницы и посмотреть, не работает ли это для вас.

<script>
$(document).on('resize', function(e){
    var OIs = $('.owl-item')
        minHeight = 0;
//reset overflow
OIs.css('overflow', 'visible');

    //cycle through items and add height to array
    for (i==0;i<OIs.length;i++){
        var thisHeight = OIs[i].innerHeight;
        if (thisHeight != undefined && thisHeight != null && thisHeight > 0){
            if (minHeight == 0 ){
                minHeight = thisHeight;
            } else if (thisHeight < minHeight){
                minHeight = thisHeight;
            }               
        }
    }
    //resize containers to smallest height
    OIs.css({'overflow':'hidden', 'height': minHeight + 'px'}       
});
</script>

если он работает, есть лучшие способы написать это, но он даст вам начало решения

Ответ 5

Мои изображения загружаются динамически, что означает, что имя изображения может время от времени меняться, как сохранить фоновое изображение и передать правильное имя изображения в файл css?

Ответ 6

Вы можете достичь равной высоты с помощью flexbox. Попробуйте следующее:

.owl-stage
   display flex
.owl-item
   flex 0 0 auto