Flexslider 2垂直缩略图导航

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

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

有没有人试过这个呢？

任何帮助将不胜感激。

干杯，马克

来源

2012-08-13 M dunbavan

从2013年1月9日起，Flexslider看起来并没有工作，但是我已经完成了大部分工作。它似乎只设计为一次在滑块中有一个项目（对我们很多人来说，并没有完全削减）; maxItem和minItem不适用于垂直滑块。

的第一步，当然，以确保方向设定为垂直，在PARAMS：

direction: "vertical",

现在，.flex视口会自动将其高度设置为任何你的高度<li>元素被设置到...但是你可以强制它的东西，如：

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

只是将它设置为任何需要的大小，因为你需要在转盘中显示，以容纳尽可能多的幻灯片。然后根据需要设计其他样式。但是，是的，还有虫子......我见过这些建议，但可以保证既不：

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

来源

2013-01-09 18:22:24 rsigg

我应该提一下，这还没有经过充分的测试 – rsigg 2013-01-09 18:30:03

我已经玩过Flexslider和CarouFredsel ... Flexslider在垂直旋转木马“无限”或连续。CarouFredsel是这种用法的更好选择。 – rsigg 2013-01-09 20:18:23

你可以用一些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-07 15:00:31 ArleyM

嗯我可以尝试，虽然希望flexslider 2更新也会有这个选项。 – 2012-09-10 16:34:43

有用。谢谢。 Flexslider并未更新任何内容，但有关垂直缩略图问题。（任何其他插件可以处理这个问题？） – 2014-12-10 16:38:10

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

您必须正确指定itemWidth选项。

来源

2014-11-27 14:47:28 Dan

解决方案是旋转当前的水平导航。
只是这个样式添加到导航<ul>（默认 '.flex方向-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-27 08:50:22 elionalisov

您可以将方向实际设置垂直第一，像这样：

direction: "vertical",

和部队没有浮在#carousel李（和增加一点余量底部到分开缩略图）：

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

来源

2017-07-20 17:37:12

Flexslider 2垂直缩略图导航

回答

相关问题