FlexSlider contour issue

I have a problem with animating flexSlider2 loop infinitive. I am trying to make a vertical carousel with three visible objects:

The problem is when the carousel reaches the last or first slide - at first it clones the element and replaces it with the correct one, only after it slides into the viewport. Is there a chance to make it a clone correctly before it glides in the viewport?

I reproduced my problem in a script: 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,
}); 

I would be grateful for any help.