2

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

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

我不能为滑块使用固定的 CSS 高度，我尝试使用 max-height 值，但它不起作用，它会以这种方式回退到滑块的固定高度。css 中的 height auto 显然不能很好地工作。有人知道解决这个问题的方法吗？这只是第一个无法正确加载的图像。

我将粘贴下面代码的 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;}
4

2 回答 2

0

如果在幻灯片加载时我做对了，那么只有第一个图像的高度为 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';
  }
});

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

于 2013-01-27T13:00:00.060 回答
0

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

#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());
          }
于 2016-09-08T14:13:59.467 回答