柔性滑块溢出从哪里来？

Question

我试图将变焦功能添加到带有WordPress的挠性滑块中。当缩放类被添加到图像中时，会在站点上创建一个水平滚动条(它非常大)，但是当缩放类被移除时(在加载之前，而不是在加载之后)，站点将按预期工作(没有溢出)。奇怪的是，每10次左右的站点就有一次会正确加载，没有溢出，一切都会正常工作。

见此处：http://keganquimby.com/adkoa/

HTML/PHP标记: img标记输出的上下文--我正在遍历图像，并在src中输出中等大小的图像，在数据-缩放图像字段中输出大型的图片(就像缩放插件所要求的那样)。然后，在后端，有一个选项可以将缩放功能添加到图像中，如果检查了，我将向图像添加一个“缩放”类(使用jquery.(见下文)

<div id="slider" class="top flexslider">
    <ul class="slides">
        <?php foreach( $images as $image ): ?>
            <li><img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php echo $image['alt']; ?>" data-zoom-image="<?php echo $image['url']; ?>" class="<?php if(get_field('enable_zoom', $image['id'])) echo 'zoom';?>"/></li>
        <?php endforeach; ?>
    </ul>
</div>

JS (来自custom.js)其他文件是jquery.elevatezoom.js、elevatezoom.jquery.json (用于缩放)和jquery.flexslider.js (用于滑块)：

jQuery( document ).ready(function($) {
    $('.flexslider').flexslider({
        animation: "slide"
    });

    $('.zoom').elevateZoom({
        zoomType : "lens",
        lensShape : "round",
        lensSize : 200  
    });
});

CSS:太长，无法添加，但它只是默认的flexslider.css文件。当缩放类从一开始就被注释掉，并且缩放类的图像没有样式时，一切都会正常工作。

Answer 1

由于滑块已被设置为滑动，而不是褪色，因此页的宽度正在更改。变焦功能是绝对定位的，并且由于定位的方式导致了大量的溢出。

将custom.js更改为

    jQuery( document ).ready(function($) {
        $('.flexslider').flexslider({
        animation: "fade"
    });

    $('.zoom').elevateZoom({
        zoomType : "lens",
        lensShape : "round",
        lensSize : 200  
    });
});