jQuery Flexslider 2 垂直缩略图导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11940549/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexslider 2 vertical thumbnail navigation
提问by M dunbavan
I am developing a site using the Flexslider 2. I am trying to get the thumbnail nav to work vertically instead of its default horizontal navigation.
我正在使用 Flexslider 2 开发一个站点。我试图让缩略图导航垂直工作，而不是其默认的水平导航。
The problem at the moment is it works but I am finding there are a lot of bugs in the vertical nav working.
目前的问题是它有效，但我发现垂直导航工作中有很多错误。
Has anyone tried this yet?
有没有人试过这个？
Any help would be much appreciated.
任何帮助将非常感激。
Cheers, Mark
干杯，马克
采纳答案by rsigg
This doesn't really seem to be working in Flexslider as of 1/9/13, however I've gotten it to work for the most part. It seems that it's only designed to have 1 item in the slider at a time (which for many of us, doesn't quite cut it); maxItem and minItem don't work for vertical sliders yet.
截至 2013 年 1 月 9 日，这在 Flexslider 中似乎并没有真正起作用，但是我已经让它在很大程度上起作用了。似乎它被设计为一次在滑块中包含 1 个项目（对于我们中的许多人来说，并没有完全削减它）；maxItem 和 minItem 不适用于垂直滑块。
The first step, is of course, to make sure that the direction is set to vertical, in the params:
第一步当然是确保方向设置为垂直，在参数中：
direction: "vertical",
Now, .flex-viewport will automatically have its height set to whatever height your <li>elements are set to... But you can force it with something like:
现在， .flex-viewport 将自动将其高度设置为您的<li>元素设置的任何高度...但是您可以使用以下内容强制它：
.flex-viewport { height: 650px !important;}
Just set it to whatever size is needed to accommodate as many slides as you need to show in the carousel. Then style the rest as needed. But yes, there are still bugs... I've seen these recommended but can vouch for neither:
只需将其设置为所需的任何大小，以容纳您需要在轮播中显示的尽可能多的幻灯片。然后根据需要设计其余部分。但是，是的，仍然存在错误......我已经看过这些推荐但不能保证：
- http://caroufredsel.dev7studios.com/
- jquery.vticker.1.4
- http://caroufredsel.dev7studios.com/
- jquery.vticker.1.4
回答by ArleyM
You can do this with some CSS rejigging. Not sure about doing this responsive all the way down, but for a large size this might be a good starting place. You'll also want to put a clearfix on .flexslider.
您可以通过一些 CSS 重新调整来做到这一点。不确定是否一直进行这种响应，但对于大尺寸，这可能是一个很好的起点。您还需要对 .flexslider 进行清除修复。
.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;}
回答by elionalisov
the solution is to rotate current horizontal navigation.
simply add this style to navigation <ul>(default '.flex-direction-nav')
解决方案是旋转当前的水平导航。
只需将此样式添加到导航中<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%;
}
to reverse sliding direction change "90" to "-90".
Not sure for all browsers
反转滑动方向将“90”更改为“-90”。
不确定对所有浏览器
回答by Nick Latreille
You can actually set your direction to vertical first, like so:
您实际上可以先将方向设置为垂直，如下所示：
direction: "vertical",
And the force no float on the #carousel li (and add a bit of margin bottom to separate the thumbnails):
并且强制在#carousel li 上没有浮动（并在底部添加一点边距以分隔缩略图）：
#carousel li {
float: none!important;
margin-bottom: 10px;
}
回答by Dan
I've raised a PR which goes some way to resolve these bugs. It isn't fully tested but it might be a good starting point. https://github.com/woothemes/FlexSlider/pull/1235
我提出了一个 PR，它在某种程度上解决了这些错误。它没有经过全面测试，但它可能是一个很好的起点。https://github.com/woothemes/FlexSlider/pull/1235
You must specify the itemWidthoption correctly.
您必须itemWidth正确指定该选项。
