我正在使用 Flexslider 2 开发一个站点。我试图让缩略图导航垂直工作,而不是其默认的水平导航。
目前的问题是它有效,但我发现垂直导航工作中有很多错误。
有没有人试过这个?
任何帮助将非常感激。
干杯,马克
我正在使用 Flexslider 2 开发一个站点。我试图让缩略图导航垂直工作,而不是其默认的水平导航。
目前的问题是它有效,但我发现垂直导航工作中有很多错误。
有没有人试过这个?
任何帮助将非常感激。
干杯,马克
你可以通过一些 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;}
截至 2013 年 1 月 9 日,这似乎在 Flexslider 中并没有真正起作用,但是我已经让它在大多数情况下工作。似乎它被设计为一次只能在滑块中包含 1 个项目(对于我们中的许多人来说,这并没有完全削减它);maxItem 和 minItem 还不适用于垂直滑块。
第一步当然是确保在参数中将方向设置为垂直:
direction: "vertical",
现在, .flex-viewport 将自动将其高度设置为您的<li>
元素设置的任何高度...但是您可以使用以下方式强制它:
.flex-viewport { height: 650px !important;}
只需将其设置为所需的任何大小,以容纳您需要在轮播中显示的任意数量的幻灯片。然后根据需要设计其余部分。但是,是的,仍然存在错误......我已经看到了这些推荐但不能保证:
您实际上可以先将方向设置为垂直,如下所示:
direction: "vertical",
并且在#carousel li 上强制没有浮动(并添加一点边距底部以分隔缩略图):
#carousel li {
float: none!important;
margin-bottom: 10px;
}
解决方案是旋转当前的水平导航。
只需将此样式添加到导航<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”。
不确定所有浏览器
我提出了一个 PR,它可以通过某种方式解决这些错误。它没有经过全面测试,但它可能是一个很好的起点。https://github.com/woothemes/FlexSlider/pull/1235
您必须itemWidth
正确指定选项。