Flexslider幻燈片白色空間

我正在使用Flexslider，並遇到一個奇怪的問題：每張幻燈片都向右移動，每張幻燈片的左側有一部分空白。Flexslider幻燈片白色空間

當我嘗試檢查DOM，我發現，臨時解決方法是要麼刪除float: left或margin-right: -100%這是在li的內嵌樣式 - 但它打破之後的滑動。會發生什麼情況是，當您單擊下一張幻燈片的箭頭時，會將第一張幻燈片向下移動，顯示第二張幻燈片，然後隱藏第一張幻燈片。

Image showing the problem with slider

如果我不與內聯樣式干預，無論如何，滑塊仍然有空白的左邊，之後我向下滾動頁面，並返回後，滑塊按預期工作，沒有問題。

請注意，我沒有在1920x1080分辨率的這個問題，但在較低的 - 1024x768例如。

可能是什麼問題？此外，這裏有一個現場演示的鏈接：http://goo.gl/RGS4O

來源

2013-06-23 jOpacic

我在flexslider.resize()函數中添加了start選項，它工作正常。

$('.flexslider').flexslider({ 
    start: function(slider){ 
    $('body').removeClass('loading'); 
     $('.flexslider').resize(); 
    } 
});

來源

2013-07-23 20:12:45 edonbajrami

在最近的一些項目中，我偶爾會在我的網頁上的flexslider圖片庫中添加一些問題，增加一些奇怪的額外白色邊距。（像50-100px左右的白色空間）在整個左邊或整個右邊。

我最終改變flexslider.css內的css規則（特別是對於版本2.2.0）我相信這是由導航箭頭隱藏和顯示的方式引起的，特別是它們的CSS。

我改變/合併一些CSS爲箭頭的顯示方式，使他們永久：

.flex-direction-nav .flex-prev { opacity: 1; left: 10px; } 
.flex-direction-nav .flex-next { opacity: 1; right: 10px; text-align: right; }

我刪除了以下css關於使用媒體查詢的箭頭：

@media screen and (max-width: 860px) { 
    .flex-direction-nav .flex-prev { opacity: 1; left: 10px;} 
    .flex-direction-nav .flex-next { opacity: 1; right: 10px;} 
}

我覺得這白色空間問題也在這裏討論得很好。 https://drupal.org/node/1695136

來源

2014-02-14 15:26:17 andxyz

它可能是CSS。嘗試在圖像上添加max-width: 100%; height: auto。

來源

2014-04-03 09:36:33

$('.flexslider').flexslider({ 
    useCSS: false 
});

添加此行在您的配置中，它將正常工作。

來源

2015-11-13 22:42:26

Flexslider幻燈片白色空間

回答

相關問題