2014-02-17 176 views
3

我flexSlider2不定式循环动画的问题。 我试图做垂直传送带3个可见的项目:FlexSlider循环问题

carousel

问题是,当转盘到达最后或第一张幻灯片 - 首先它克隆项目,并与它滑入视后才能正确的更换。在视口中滑动之前是否有机会使其克隆正确的项目?

我转载我的小提琴问题: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, 
}); 

我将是一个感恩呃帮助。

+0

我想你已经通过一次显示3项违反了插件的意图。 FlexSlider在其api中没有该选项。考虑使用BxSlider。 – isherwood

+0

isherwood,谢谢你的回答。我会尝试BxSlider :) – Jolanta

+0

你的小提琴不起作用。 – VJS

回答

0

您还可以查看Cycle2:http://jquery.malsup.com/cycle2/ 根据我的经验,它是迄今为止最好的jQuery旋转木马。它配备了一个定义良好的API,可以与外部插件一起工作,并为各种操作提供许多不同的选项。

垂直滚动,从循环2的网站采取基本例如:

<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被添加到头部上面会没有额外的初始化工作。

看到它在这里的行动:http://jsfiddle.net/natnaydenova/7uXPx/