FlexSlider：中心當前圖像

我從使用bjqs滑塊（它的響應速度低於標準）切換到使用流行的FlexSlider。我修改了bjqs滑塊以顯示屏幕上居中顯示的「當前」圖像，在當前圖像之前和之後顯示（部分）前一個和下一個圖像。您可以使用bjqs滑塊here來查看我的實現，以瞭解我所追求的內容。FlexSlider：中心當前圖像

現在用FlexSlider，我不能完全弄清楚這樣做的一種方法。圖像向左浮動，因此「當前」圖像位於容器的左側。任何人都知道一種方法來實現這一點？

現在我只使用默認樣式和標記爲FlexSlider，具有以下的javascript：

$('.flexslider').flexslider({ 
    animation: "slide", 
    itemWidth: 850, 
    });

來源

2013-03-17 Trevan Hetzel

我只是想在一個新的接受的答案安裝的Flexslider，這不會使當前圖像居中。我試圖完成像你展示的例子，沒有運氣。還有什麼你做的，或者你有一個活生生的例子？ – jwinn 2013-06-27 18:43:13

我只是有這個同樣的問題，答案在於CSS。

我的HTML格式是這樣的：

<div id="slider" class="flexslider"> 
<ul class="slides" > 
<li><img src='images/slideshows/image04.jpg' /></li> 
<li><img src='images/slideshows/image06.jpg' /></li> 
<li><img src='images/slideshows/image07.jpg' /></li> 

</ul> 
</div>

我不得不改變CSS的IMG和立制從這個工作：

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} 
.flexslider .slides img {width: 100%; display: block;}

這樣：

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; background-color: #ffffff; text-align: center;} 
.flexslider .slides img {width: auto; display: inline;}

對我來說，我不得不添加背景顏色，因爲另一張幻燈片的一部分顯示在左側，而白色的ju ST匹配我的頁面佈局。

希望有所幫助。

來源

2013-04-25 17:43:11 Abernasty

在章節的flexslider.css文件：

/* FlexSlider Necessary Styles*/

變化：

.flexslider .slides img {width: auto; display: block;}

這樣：

.flexslider .slides img {width: auto; display: block; margin-left: auto; margin-right: auto;}

來源

2013-05-30 00:02:51 legit

FlexSlider：中心當前圖像

回答

相關問題