Проблема с контуром 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/