3

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

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

有没有人试过这个？

任何帮助将非常感激。

干杯，马克

4

5 回答 5

4

你可以通过一些 CSS rejigging 来做到这一点。不确定是否要一直响应此响应，但对于大尺寸，这可能是一个不错的起点。您还需要在 .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

截至 2013 年 1 月 9 日，这似乎在 Flexslider 中并没有真正起作用，但是我已经让它在大多数情况下工作。似乎它被设计为一次只能在滑块中包含 1 个项目（对于我们中的许多人来说，这并没有完全削减它）；maxItem 和 minItem 还不适用于垂直滑块。

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

direction: "vertical",

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

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

只需将其设置为所需的任何大小，以容纳您需要在轮播中显示的任意数量的幻灯片。然后根据需要设计其余部分。但是，是的，仍然存在错误......我已经看到了这些推荐但不能保证：

于 2013-01-09T18:22:24.357 回答
2

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

direction: "vertical",

并且在#carousel li 上强制没有浮动（并添加一点边距底部以分隔缩略图）：

#carousel li {
    float: none!important;
    margin-bottom: 10px;
}
于 2017-07-20T17:37:12.570 回答
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 回答
1

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

您必须itemWidth正确指定选项。

于 2014-11-27T14:47:28.483 回答