Flexslider溢出來自哪裏？

我正在嘗試使用WordPress將zoom functionality添加到flexslider slider。當縮放類被添加到圖像中時，會在網站上創建一個水平滾動條（它非常大），但是當縮放類被移除時（在加載之前，而不是在之後），網站按預期工作（沒有溢出）。奇怪的是，每十倍左右一次網站就會正確加載，沒有溢出，一切都會正常工作。Flexslider溢出來自哪裏？

在這裏看到：http://keganquimby.com/adkoa/

HTML/PHP標記：上下文img標籤輸出 - 我循環的影像，並輸出中等大小的一個在src，和一個大的數據-zoom-image字段（就像縮放插件所要求的那樣）。然後，在後端，有一個選項可以爲圖像添加縮放功能，如果檢查過了，我會爲圖像添加一個「縮放」類別（要用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文件。一切正常，縮放類從一開始就被註釋掉了，縮放類的圖像沒有樣式。

來源

2013-10-15 Kegan Quimby

由於滑塊已設置爲滑動而不褪色，因此頁面的寬度發生了變化。縮放功能絕對定位，並因定位方式而導致大量溢出。

變化custom.js到

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

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

來源

2013-10-15 03:07:44

Flexslider溢出來自哪裏？

回答

相關問題