Flexslider smoothHeight無法正常工作

當我調整窗口大小時，圖像上方和下方都有大量白色空間。我曾嘗試使用smoothHeight：true，但所有這一切都將容器設置爲500px。這是不是應該使高度動態？我知道這兩個圖像在我的滑塊中有不同的大小。但仍然第一個圖像應該沒有空白。繼承人我的代碼：Flexslider smoothHeight無法正常工作

<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; ?>

來源

2017-06-19 Reece

你可以嘗試從圖像中刪除'position：absolute'。只要您使用絕對定位，家長就不會知道圖像的高度。 –

這真棒感謝隊友。如果你把它作爲一個實際的答案，我會接受它 – Reece

哦酷，做到了這一點？ –

您的圖片設置爲position: absolute從頁面的流量中刪除。這意味着頁面上的其他元素不知道它佔據了多少空間。 Flexslider根據單個幻燈片的尺寸調整尺寸，在您的情況下尺寸爲li.slide。而且由於li.slide中的圖片是absolute，因此li.slide的高度將與其內容（您的圖片）的大小不匹配。

嘗試從圖像中刪除position: absolute，看看是否允許它縮放。

來源

2017-06-19 15:23:15

謝謝它刪除了大部分空白。其餘我刪除我的身高風格 – Reece

@Reece甜！ –

Flexslider smoothHeight無法正常工作

回答

相關問題