图像滑块：保持所有图像的等高，同时保持滑块反应 [英] Image slider: maintaining equal height for all images while keeping slider responsive

问题描述

在我的JS图片滑杆（Owl-Carousel）中，图片具有不同的尺寸：

js

  $（document）.ready（function（）{
 
 $（＃owl-example）。owlCarousel（{
 afterUpdate：function（）{
 updateSize（）; 
}，
 afterInit：function（）{
 updateSize（）; 
} 
} ; 
 function updateSize（）{
 var minHeight = parseInt（$（'。owl-item'）。eq（0）.css（'height'））; 
 $（'。每个（函数（）{
 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高度'））; 
 $（'。owl-item'）。each（function（）{
 var thisHeight = parseInt（$（this）.css（'height'））; 
 minHeight =（minHeight< ; = thisHeight？minHeight：thisHeight）; 
}）; 
 $（'。owl-wrapper-outer'）。css（'height'，minHeight +'px'）; 
 
 / *显示裁剪图像的底部* / 
 $（'。owl-carousel .owl-item img'）。 thisHeight = parseInt（$（this）.css（'height'））; 
 if（thisHeight> minHeight）{
 $（this）.css（'margin-top'， -  1 * -minHeight）+'px'）; 
} 
}）; 
 
} 
  

In my JS image slider (Owl-Carousel), images have different dimensions:

http://goo.gl/KmpX2P

You can see that the image height varies within the carousel. How to make it constant while keeping carousel responsive? I need images to fill the slider space at all times, therefore some will have to be cropped through CSS somehow. The desired result looks like this:

解决方案

It can be specified in css.

Example,

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

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

EDIT The following solution uses the plugin's callback events to modify the viewport's/wrapper's height according to the smallest image height.

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

Regarding the latest comment, to show the bottom part of the large images one approach could be to iterate the images and add a negative top margin equal to the part of these images hidden.

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

    }

这篇关于图像滑块：保持所有图像的等高，同时保持滑块反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！