2

ここで、wordpress サイトの SlidesJS スライダーを使用して、複数のスライドショーが 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%;
}

それがうまくいかない場合は、javascript の方法でこれを行うことができます。

$('.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 に答える