Flexslider smoothHeight 不工作

Question

当我调整 window 大小时，图像上方和下方有大量白色 space。我试过使用 smoothHeight: true 但这只是将容器设置为 500px。这不是应该使高度动态吗？我知道我的滑块中的两个图像大小不同。但第一张图片应该没有白色 space。这是我的代码：

<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，这会将它们从页面流中移除。这意味着页面上的其他元素不知道它占据了多少space。 Flexslider 根据单个幻灯片的尺寸调整内容的大小，在您的情况下为 li.slide。由于 li.slide 中的图像是 absolute，li.slide 的高度将与其中内容（您的图像）的大小不匹配。

尝试从图像中删除 position: absolute，看看是否可以缩放。

Flexslider smoothHeight 不工作

Flexslider smoothHeight not working

html

css

php

wordpress

flexslider