フレックススライダーsmoothHeightが動作しない

Question

ウィンドウのサイズを変更すると、画像の上下に空白が表示されます。 smoothHeight：trueを使用してみましたが、これはすべてコンテナを500pxに設定しています。これは高さを動的にすることになっていないのですか？私は両方の画像が私のスライダーで異なるサイズであることを知っています。それでもまだ最初のイメージには空白がありません。 HERESに私のコード：

<script type="text/javascript" charset="utf-8"> 
      $(document).ready(function() { 
       $('.flexslider').flexslider({ 
        animation: "slide", 
        animationLoop: true, 
        slideshow: true,     
        slideshowSpeed: 4000,   
        animationSpeed: 1000, 
        randomize: false, 
        pauseOnHover: true, 
        pauseOnAction: false, 
        controlNav: false, 
        directionNav: true, 
        smoothHeight: true 
       }); 
      }); 
     </script> 


<?php if(have_rows('slider')): ?> 
        <div class="flexslider no_border"> 
         <ul class="slides"> 
          <?php while(have_rows('slider')): the_row(); 

           // vars 
           $image = get_sub_field('image'); 
           $content = get_sub_field('content'); 
           $link = get_sub_field('link'); 

           ?> 

           <li class="slide"> 

            <?php if($link): ?> 
             <a href="<?php echo $link; ?>"> 
            <?php endif; ?> 

             <img class="slider_images" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" /> 

            <?php if($link): ?> 
             </a> 
            <?php endif; ?> 

            <?php echo $content; ?> 
           </li> 
          <?php endwhile; ?> 
         </ul> 
        </div> 
       <?php endif; ?> 

Answer 1

あなたのイメージは、ページの流れからそれらを除去するposition: absoluteに設定されています。ページ上の他の要素の意味は、それがどれくらいのスペースを占めるかを知りません。 Flexsliderは個々のスライドの寸法に基づいて物のサイズを変更します。あなたの場合はli.slideです。 li.slideの画像はabsoluteなので、li.slideの高さは画像の中身のサイズと一致しません。

画像からposition: absoluteを削除し、拡大縮小できるかどうかを確認してください。