Flexslider 2垂直縮略圖導航

我正在開發一個使用Flexslider 2的網站。我試圖讓縮略圖nav垂直工作，而不是默認的水平導航。Flexslider 2垂直縮略圖導航

目前的問題是它的工作原理，但我發現垂直導航工作中存在很多錯誤。

有沒有人試過這個呢？

任何幫助將不勝感激。

乾杯，馬克

來源

2012-08-13 M dunbavan

從2013年1月9日起，Flexslider看起來並沒有工作，但是我已經完成了大部分工作。它似乎只設計爲一次在滑塊中有一個項目（對我們很多人來說，並沒有完全削減）; maxItem和minItem不適用於垂直滑塊。

的第一步，當然，以確保方向設定爲垂直，在PARAMS：

direction: "vertical",

現在，.flex視口會自動將其高度設置爲任何你的高度<li>元素被設置到...但是你可以強制它的東西，如：

.flex-viewport { height: 650px !important;}

只是將它設置爲任何需要的大小，因爲你需要在轉盤中顯示，以容納儘可能多的幻燈片。然後根據需要設計其他樣式。但是，是的，還有蟲子......我見過這些建議，但可以保證既不：

http://caroufredsel.dev7studios.com/
jquery.vticker.1.4

來源

2013-01-09 18:22:24 rsigg

我應該提一下，這還沒有經過充分的測試 – rsigg 2013-01-09 18:30:03

我已經玩過Flexslider和CarouFredsel ... Flexslider在垂直旋轉木馬「無限」或連續。CarouFredsel是這種用法的更好選擇。 – rsigg 2013-01-09 20:18:23

你可以用一些CSS正在調整做到這一點。不知道如何做到這一點，但對於大尺寸這可能是一個很好的起點。您還需要在.flexslider上放置一個clearfix。

.flex-viewport {width:80.5% !important;float:left;} 
.flex-control-thumbs {width:19% !important;float:right;margin:0 !important;} 
.flex-control-thumbs li {width:auto !important;}

來源

2012-09-07 15:00:31 ArleyM

嗯我可以嘗試，雖然希望flexslider 2更新也會有這個選項。 – 2012-09-10 16:34:43

有用。謝謝。 Flexslider並未更新任何內容，但有關垂直縮略圖問題。（任何其他插件可以處理這個問題？） – 2014-12-10 16:38:10

我已經提出了一個公關這有助於解決這些錯誤。它沒有完全測試，但它可能是一個很好的起點。 https://github.com/woothemes/FlexSlider/pull/1235

您必須正確指定itemWidth選項。

來源

2014-11-27 14:47:28 Dan

解決方案是旋轉當前的水平導航。
只是這個樣式添加到導航<ul>（默認 '.flex方向-NAV'）

.flex-direction-nav{ 
    /*ROTATION*/ 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
    -o-transform: rotate(90deg); 

    /*POSITIONING*/ 
    display: inline-block; 
    vertical-align: text-top; 
    text-indent: 0px; 
    width: 51%; 
    margin-top: -24%; 
}

扭轉滑動方向變化「90」到「-90」。
不知道對於所有瀏覽器

來源

2015-11-27 08:50:22 elionalisov

您可以將方向實際設置垂直第一，像這樣：

direction: "vertical",

和部隊沒有浮在#carousel李（和增加一點餘量底部到分開縮略圖）：

#carousel li { 
    float: none!important; 
    margin-bottom: 10px; 
}

來源

2017-07-20 17:37:12

Flexslider 2垂直縮略圖導航

回答

相關問題