Where is the Flexslider overflow coming from?

Question

I'm trying to add zoom functionality to a flexslider slider with WordPress. When the zoom class is added to the images, a horizontal scroll bar is created on the site (and it's quite big), but when the zoom class is removed (before loading, not after) the site works as intended (with no overflow). Oddly, one in every 10 or so times the site will load correctly, with no overflow and everything will work.

See here: http://keganquimby.com/adkoa/

HTML/PHP markup: Context for the img tag output - I'm looping through the images, and outputting the medium sized one in the src, and the large one in the data-zoom-image field (just like the zoom plugin requires). Then, in the backend, there's an option to add zoom functionality to the images, if that's checked I'm adding a class of "zoom" to the images (to be targeted with jquery... see below)

<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 (from custom.js) the other files are jquery.elevatezoom.js, elevatezoom.jquery.json (for the zoom) and jquery.flexslider.js (for the slider):

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

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

CSS: too long to add, but it's just the default flexslider.css file. Everything works, when the zoom class is commented out from the start, and the images with the zoom class aren't styled.

Answer 1

Since the slider had been set to slide, and not fade, the width of the page was changing. The zoom function is positioned absolutely, and caused the massive overflow because of the way it was positioned.

Change custom.js to

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

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