flexslider 2继续沿一个方向循环不工作

时间:2013-08-19 06:14:29

标签: javascript jquery flexslider

我试图使柔性滑板沿一个方向绕一个方向循环。当它到达循环中的最后一个图像然后它应该再次从第一个图像开始。

我在jsfiddle

上设置的示例有两个问题

一:我无法让它在jsFiddle

上运行

二:动画在最后开始然后从另一个方向开始,而我想从一个方向向左移动到右边。

$(window).load(function(){
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    easing: "linear",
    useCSS: false,
    randomize: false,
    pauseOnHover: true,
    slideshowSpeed: 12,
    animationSpeed: 8000,
    controlNav: false,
    directionNav: false,
    itemWidth: 210,
    itemMargin: 5,
    start: function(slider){
      $('body').removeClass('loading');
    }
  });

1 个答案:

答案 0 :(得分:1)

第一期

您错过了脚本末尾的结束)};,因此它无效,您必须在框架和扩展程序面板中将脚本部分设置为No wrap - in <head>

对于第一张图片,您离开了完整路径http://flexslider.woothemes.com/

第二期

可以使用animationLoop: true设置唯一的循环功能,现在是唯一的解决方案。

这里有一个请求在github中提取,以获得更流畅的动画和循环:https://github.com/woothemes/FlexSlider/issues/287

代码:

$(window).load(function () {
    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: true,
        easing: "linear",
        useCSS: false,
        randomize: false,
        pauseOnHover: true,
        slideshowSpeed: 12,
        animationSpeed: 8000,
        controlNav: false,
        directionNav: false,
        itemWidth: 210,
        itemMargin: 5,
        start: function (slider) {
            $('body').removeClass('loading');
        }
    });
});

文档:https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties

演示:http://jsfiddle.net/IrvinDominin/6TXzC/