Flexslider Slide寬度問題

Question

使用flexslider我有一個奇怪的問題。 Slide LIs沒有得到正確的寬度，所以顯示了所有的幻燈片。這隻發生在首頁加載。只要我切換到另一個選項卡，並切換回來一切看起來很好。也許一個JS加載問題？！

截圖：here

flexslider.css

.flexslider {margin: 0; padding: 0;} 
.flexslider .slides > li {text-align: center; display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ 
.flexslider .slides li.flex-active-slide img {text-align:center; width: auto; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); } 

JS

$(window).load(function() { 
    $('.flexslider').flexslider({ 
     controlNav: true, 
     directionNav: true 
    }); 
}); 

我和$（文件）。就緒（函數（）也一樣，但還是試了一下同樣的問題

有什麼建議嗎？

Answer 1

此代碼/順序可能對您有幫助;至少我已經取得了成功。

<script src="js/jquery-1.8.3.min.js"></script> 
<script src="js/jquery.easing.js"></script> 
<script defer src="js/jquery.flexslider-min.js"></script> 
<script> 
$(document).ready(function(){ 
    $('.flexslider').flexslider({ 
     controlNav: true, 
     directionNav: true, 
    }); 
}); 
</script> 

Answer 2

我有同樣的問題。

首先在會話中加載，Flexslider獲取滑塊容器的寬度，如果它不明確，它的值爲0px。 然後幻燈片的寬度爲0px，您無法看到它們。

爲了避免這個問題足以修復滑塊容器的寬度，在我的情況604px：

<div class="flexslider" style="width: 604px"> 
    <ul class="slides"> 
     <li> 
      <img id="slide1" /> 
     </li> 
     <li> 
      <img id="slide2" /> 
     </li> 
    </ul> 
</div> 

Answer 3

嘛，沃納。

我結束了你的解決方案。不幸。

這是另一種方式來做到這一點。

/* SLIDERS in content */ 
$('.flexslider').flexslider({ 
    animation: "slide", 
    start: function(slider){ 
     $('.flexslider').resize(); 
    } 
}); 

我選擇不使用上面的代碼，有一個延遲和製造時的幻燈片更新到正確的寬度有點跳躍的原因。

如果有人有更清潔的解決方案 - 請告訴我。我正在使用最新的flexslider - 而這個問題似乎只是偶爾發生。但是，當它... ... arghhh。

Answer 4

我解決了這個問題，在我的flexslider調用中刪除minItems。似乎與maxItems雖然。

Answer 5

我發現它爲什麼這樣做，而且非常簡單。

這是因爲CSS！在滑塊上的ul上。

起飛的填充和利潤率上ul.slides

.slides{ 
    padding:0; 
    margin:0; 
} 

後，我這樣做大小調整完善工作，每次在所有瀏覽器和移動。

Answer 6

對我來說，問題在於標記。我有這樣的：

<div class='carousel-slides'> 
    <div class='carousel-slide'></div> 
    <div class='carousel-slide'></div> 
</div> 

---

$('.carousel-slides', context).flexslider({ 
    selector: '.carousel-slide' 
}); 

...但它似乎是它需要被應用到每張幻燈片上，這是荒謬的內部DIV。

<div class='carousel-slides'> 
    <div class='carousel-slide'> 
    <div class='carousel-slide-inner'></div> 
    </div> 
    <div class='carousel-slide'> 
    <div class='carousel-slide-inner'></div> 
    </div> 
</div> 

---

$('.carousel-slides', context).flexslider({ 
    selector: '.carousel-slide > .carousel-slide-inner' 
}); 

Answer 7

也許這是一個有點晚了另一種答案，但在這裏，嘗試所有的答案後，和其他論壇，我結束了自己的解決方案，類似於人，但至少我發現它非常連貫和乾淨。

我在移動環境中遇到了問題，滑塊位於一個標籤內一旦打開標籤即打開的標籤內。內容是在display:none，這導致問題flexslider（v。2.5），這是無法確定所載幻燈片的正確寬度。

所以我糾正了我的CSS，並把playng的容器隱藏在可見性和不透明度之下。

的Html SAMPL

<dd class="tab-container with-slider"> 
    <div class="flexslider"> 
     <ul class="slides"> 
      <li>whatever </li> 
     </ul> 
    </div> 
</dd> 

的CSS：

/*all other containers behave well with display none/block so I leave them with normal behavior*/ 
.parent dd.tab-container { 
     display: none; position: relative; 
} 
/*container with flexslider inside uses visibility and opacity to be hidden*/ 
.parent dd.tab-container.with-slider{ 
    display: block; 
    height: 0px; 
    visibility: hidden; 
    opacity: 0; 
} 
.parent.accordion-open dd.tab-container.with-slider{ 
    height: auto; 
    visibility: visible; 
    opacity: 1; 
} 

的js是從基本的例子簡單明瞭，僅此而已。

$j('.myTabOpener').click(function() { 
    var mySlider = $j(this).find('.flexslider'); 
    mySlider.flexslider({ 
     animation: "slide", 
     animationLoop: false, 
     itemWidth: 210, 
     itemMargin: 5, 
     minItems: getGridSize(), 
     maxItems: getGridSize() 
    }); 
});