FlexSlider循环问题

Question

我有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,
}); 

我将不胜感激任何帮助。

Answer 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/