javascript - SlidesJS 自动高度问题

Question

我在这里使用 wordpress 站点的 SlidesJS slider 遇到了一个问题，其中多个幻灯片通过 ajax 加载到具有 AutoHeight 值的同一页面(不同时运行)。我设法让 AutoHeight 通过选项工作，它确实有效，只是不适用于幻灯片的第一张图像。第一张图片不会在第一次加载时出现。单击下一步或等待幻灯片自动执行此操作时，一切都与其他图像一起使用。

我想那是因为当 slider 第一次加载时高度是 0 ?!

我不能为 slider 使用固定的 CSS 高度，我尝试使用 max-height 值，但没有用，它会以这种方式回退到 slider 的固定高度。 css 中的高度自动显然不能正常工作。有人知道解决这个问题的方法吗？这只是第一张未正确加载的图片。

我将粘贴下面代码的 CSS 和 Javascript

 initializePortSlider=function(){
    if($().slides) {

        var portSliderPreloader = $('#portfolio-slider').attr('data-loader');

        $("#portfolio-slider").slides({
            preload: true,
            preloadImage: portSliderPreloader,
            play: 5000,
            pause: 2500,
            hoverPause: true,
            autoHeight: true, 
            container: 'portfolio-slider-wrap',
            effect: 'fade',
            next: 'gallery-next',
            prev: 'gallery-prev',
            crossfade: true,
            generatePagination: false
        });

    }
    };
    initializePortSlider();

slider 的 CSS

#portfolio-slider {
position: relative;
width: 588px;
line-height: 1;
padding-top:10px;
padding-bottom:10px;}

#portfolio-slider .portfolio-slider-wrap {
position: relative;
width: 588px;}

.portfolio-slider-wrap a,
.portfolio-slider-wrap img {
display: block;
width: 588px;
height:auto;}

Answer 1

如果我在 slideShow 加载时做对了，只有第一张图片的高度为 0。

您可以通过多种方式解决此问题:

CSS:

.portfolio-slider-wrap img:first-child {
   height: auto or 100%;
}

如果那行不通，您可以使用 javscript 方式执行此操作:

$('.portfolio-slider-wrap').find('img').each(function(i, obj){
  if (obj.clientHeight <= 0){
      obj.style.height = obj.offsetParent.clientHeight + 'px';
  }
});

在幻灯片放映开始后立即添加此代码。