Question

我在这里遇到了一个问题，使用SlidesJS滑块进行wordpress网站，多个幻灯片通过ajax加载到同一页面（不同时运行）和AutoHeight值。我设法让AutoHeight按选项工作，它实际上有效，它只适用于幻灯片的第一张图片。第一次加载时不会出现第一张图像。当点击下一个，或等到幻灯片自动执行此操作时，一切都可以与其他图像一起使用。

我猜那是因为当滑块第一次加载高度为0？

我无法使用固定的CSS高度滑块，我尝试使用max-height值，这不起作用，它将以这种方式回退到滑块的固定高度。 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();

滑块的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

如果我在幻灯片加载时只有第一张图片获得高度为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';
  }
});

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

Answer 2

您需要在每个滚动条件上将滑块高度设置为图像高度。这个解决方案对我有用。

#slides是我正在使用的所有img放置的div的id。

// other option for slidesjs,

callback: {
          loaded: function(number) {
            // Use your browser console to view log
       jQuery('#slides').height(jQuery('.slidesjs-control img:nth-child(1)').height());
            console.log('SlidesJS: Loaded with slide #' + number);
          },
          start: function(number) {
            // Use your browser console to view log
            console.log('SlidesJS: Start Animation on slide #' + number);
          },
          complete: function(number) {
            // Use your browser console to view log
            console.log('SlidesJS: Animation Complete. Current slide is #' + number);
  jQuery('#slides').height(jQuery('.slidesjs-control img:nth-child('+number+')').height());
          }

SlidesJS自动高度问题

2 个答案: