Javascript SlidesJS自动高度问题

我在wordpress站点使用SlidesJS滑块时遇到了一个问题，通过ajax将多个幻灯片加载到同一页面（不同时运行），并使用AutoHeight值。我设法让AutoHeight按选项工作，但它实际上是工作的，只是不适用于幻灯片的第一个图像。第一次加载时第一个图像不会出现。当单击“下一步”或等待幻灯片放映时，所有内容都会自动处理其他图像

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

我不能为滑块使用固定的CSS高度，我尝试使用“最大高度”值，但不起作用，它将以这种方式回退到滑块的固定高度。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;}

---

如果我在幻灯片加载时没有弄错，只有第一张图像的高度为0

您可以通过以下几种方式解决此问题：

css:

如果这不起作用，您可以通过以下方式进行：

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

$（'.portfolio slider wrap'）。查找（'img'）。每个（函数（i，obj）{
如果（obj.clientHeight，则需要在每个滚动上将滑块高度设置为图像高度。
这个解决方案对我有效

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


//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());
          }

回拨：{
已加载：函数（编号）{
//使用浏览器控制台查看日志
jQuery（'.#slides'）.height（jQuery（'.slidesjs-control-img:nth-child（1）'）.height（））；
log（'SlidesJS:Loaded with slide#'+number）；
},
开始：功能（编号）{
//使用浏览器控制台查看日志
log（'SlidesJS:Start Animation on slide#'+number）；
},
完成：功能（编号）{
//使用浏览器控制台查看日志
log（'SlidesJS:Animation Complete.当前幻灯片为#'+编号）；
jQuery（'.#slides'）.height（jQuery（'.slidesjs-control-img:n个子（'+number+'））.height（））；
}

非常感谢您的回答，我两次都尝试了，但都不起作用。javascript会将第一个图像的高度应用到后面的图像上。CSS，我以前尝试过，但您遇到了第一个图像无法加载的问题。尽管如此，仍然有效。公文包滑块包装div:first child{min height:500px；}”这里的问题是，这是一个非常糟糕的解决方案，因为有些滑块只有两个超过800像素的图像，有些滑块只有400像素（高度）我不确定这是否是我要问的，因为我对Javascript非常缺乏经验，但是否有可能通过Javascript为第一个子图像提供不同的滑动速度？这样我就可以通过放置一个白色1x1像素来解决问题，该像素在一秒钟后消失，然后滑动到下一个图片。请准确告诉我y您想做什么。因为，滑块的第一个子图像的自动高度没有显示。但是可以通过css在第一个图像上包含“img:first child”是否也可以通过Javascript对第一个子项产生影响，使其在一两秒钟后消失，或者以不同的速度滑动？这样，自动高度不起作用就无关紧要了，我可以通过使用加载gif或类似于每个滑块的第一个图像的方式绕过它，就像dummy一样。您可以使用jquery插入图像第一个前面：$（'.portfolio slider wrap img'）.first（）.before（''）； 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()); }