FlexSlider 循环问题答案

【问题标题】：FlexSlider loop issueFlexSlider 循环问题
【发布时间】：2014-02-17 16:06:09
【问题描述】：

我对 flexSlider2 不定式循环动画有疑问。我正在尝试使用 3 个可见项目制作垂直轮播：

问题是当轮播到达最后一张或第一张幻灯片时 - 首先它会克隆项目并仅在滑入视口后才替换为正确的项目。有没有机会让它在视口中滑动之前克隆正确的项目？

我在小提琴中重现了我的问题：http://jsfiddle.net/jolanta/RLk8d/3/

HTML：

<div class="left-slider-content">
    <div class="flexslider-left carousel" id="flexslider-left">
        <ul class="slides">
            <li><img src="http://s27.postimg.org/pmf1hghf3/slider_1.png?noCache=1392651530" /></li>
            <li><img src="http://s7.postimg.org/u26xzbnlz/slider_2.png?noCache=1392651562" /></li>
            <li><img src="http://s3.postimg.org/5yb8v5d4f/slider_3.png?noCache=1392651586" /></li>
            <li><img src="http://s13.postimg.org/j7zbo5k37/slider_4.png?noCache=1392651603" /></li>
            <li><img src="http://s12.postimg.org/p3rnfvc55/slider_5.png" /></li>
        </ul>
      </div>
    <div class="sw_arrows"></div>
</div>

CSS：

.left-slider-content {
    width:100px;
}
.flexslider-left .flex-viewport {
    height: 297px!important;
}
.carousel .slides {
    display: block;
    margin: 0 auto;
    width: 100%;
    position: relative;
    list-style: none;
    overflow: hidden;
}
.carousel .slides li {
    display: inline;
    padding: 0;
    list-style: none;
}

JS：

$('#flexslider-left').flexslider({
  animation: "slide",
  direction: "vertical",
  controlNav: false,
  animationLoop: true,
  controlsContainer: ".sw_arrows",
  slideshow: false,
  move: 1,
});

如果有任何帮助，我将不胜感激。

【问题讨论】：

我认为您一次显示 3 个项目违反了插件的意图。 FlexSlider 在其 api 中没有该选项。考虑改用 BxSlider。
isherwood，感谢您的回答。我会试试 BxSlider :)
你的小提琴不起作用。

标签： jquery html carousel flexslider

【解决方案1】：

您也可以查看Cycle2：http://jquery.malsup.com/cycle2/ 根据我的经验，它是迄今为止最好的 jQuery 轮播。它带有一个定义良好的 API，可以与外部插件一起使用，并为各种操作提供了许多不同的选项。

垂直滚动的基本示例，取自 Cycle2 的网站：

<div class="cycle-slideshow"
    data-cycle-fx="scrollVert"
    >
    <img src="http://malsup.github.io/images/p1.jpg">
    <img src="http://malsup.github.io/images/p2.jpg">
    <img src="http://malsup.github.io/images/p3.jpg">
    <img src="http://malsup.github.io/images/p4.jpg">
</div>

只要将 jquery.cycle2.js 添加到 HEAD 部分，上述操作无需额外初始化即可工作。

在此处查看实际操作：http://jsfiddle.net/natnaydenova/7uXPx/

【讨论】：