3

Flexslider 2を使用してサイトを開発しています。サムネイルナビゲーションをデフォルトの水平ナビゲーションではなく、垂直に機能させようとしています。

現時点での問題はそれが機能することですが、垂直ナビゲーションの機能には多くのバグがあることがわかりました。

誰かがこれをもう試しましたか？

どんな助けでも大歓迎です。

乾杯、マーク

4

5 に答える 5

4

これは、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-07T15:00:31.700 に答える
3

これは、1/9/13の時点では、Flexsliderで実際には機能していないようですが、ほとんどの部分で機能するようになっています。一度にスライダーに1つのアイテムしか入れないように設計されているようです（私たちの多くにとって、それは完全にはカットされていません）。maxItemとminItemは、垂直スライダーではまだ機能しません。

もちろん、最初のステップは、パラメータで方向が垂直に設定されていることを確認することです。

direction: "vertical",

これで、.flex-viewportの高さは、<li>要素が設定されている高さに自動的に設定されます...ただし、次のように強制することができます。

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

カルーセルに表示するのに必要な数のスライドに対応するために必要なサイズに設定するだけです。次に、必要に応じて残りのスタイルを設定します。しかし、はい、まだバグがあります...私はこれらの推奨事項を見ましたが、どちらも保証できません：

于 2013-01-09T18:22:24.357 に答える
2

解決策は、現在の水平ナビゲーションを回転させることです。
このスタイルをナビゲーションに追加するだけ<ul>です（デフォルトは'.flex-direction-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-27T08:50:22.230 に答える
2

次のように、実際には最初に方向を垂直に設定できます。

direction: "vertical",

そして、＃carousel liにフロートを強制しない（そしてサムネイルを分離するために少しマージンの底を追加する）：

#carousel li {
    float: none!important;
    margin-bottom: 10px;
}
于 2017-07-20T17:37:12.570 に答える
1

私はこれらのバグを解決するために何らかの方法で行くPRを上げました。完全にはテストされていませんが、出発点としては適切かもしれません。https://github.com/woothemes/FlexSlider/pull/1235

itemWidthオプションを正しく指定する必要があります。

于 2014-11-27T14:47:28.483 に答える