Question

我正在使用Flexslider开发一个网站2.我试图让缩略图导航垂直工作，而不是默认的水平导航。

目前的问题是它有效，但我发现垂直导航工作中存在很多错误。

有人试过这个吗？

非常感谢任何帮助。

干杯，标记

Answer 1

您可以通过一些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;}

Answer 2

从13/9/13开始，这似乎并没有在Flexslider中运行，但是我已经让它在大多数情况下工作了。它似乎只是设计为一次在滑块中有一个项目（对于我们中的许多人来说，它并没有完全削减它）; maxItem和minItem不适用于垂直滑块。

第一步，当然是确保方向设置为垂直，在参数中：

direction: "vertical",

现在，.flex-viewport会自动将其高度设置为<li>元素设置为的任何高度......但您可以使用以下内容强制它：

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

只需将其设置为所需的大小，以容纳您需要在旋转木马中显示的幻灯片。然后根据需要设计其余样式。但是，是的，仍然存在错误......我已经看到了这些推荐，但可以保证不会：

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

Answer 3

解决方案是旋转当前水平导航只需将此样式添加到导航<ul>（默认＆＃39; .flex-direction-nav＆＃39;）

.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%;
}

反转滑动方向变化＆＃34; 90＆＃34;至＆＃34; -90＆＃34;。
并不确定所有浏览器

Answer 4

我已经提出了一个PR来解决这些错误。它没有经过全面测试，但它可能是一个很好的起点。 https://github.com/woothemes/FlexSlider/pull/1235

您必须正确指定itemWidth选项。

Answer 5

您可以先将方向设置为垂直方向，如下所示：

direction: "vertical",

并且力量没有漂浮在#carousel li上（并添加一点边距以分隔缩略图）：

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

Flexslider 2垂直缩略图导航

5 个答案: