Question

我有一个如下所示的滑块：

$('#slider').cycle({
    fx: 'scrollHorz',
    speed: 1250, 
    timeout: 5000,
    easing: 'easeInOutExpo',
    pager: '#slider-pagination',
    next: '#next-slide',
    prev: '#prev-slide',
    pause: 1
});

默认情况下，当它在最后一个幻灯片循环时，再次向左滚动以重新开始，就好像它是一个无限循环。我想让它滚动回所有幻灯片并再次登陆第一张幻灯片。就像它在这里一样（见最后一张幻灯片）：http://www.iconlicious.com/。我必须使用Cycle，所以我不能使用相同的插件。

如何实现？

由于

Answer 1

解决方案是将nowrap选项设置为false。

虽然我无法测试任何内容，但您可能必须使用end选项来定义返回到开头的函数。

所以，比如：

$('#slider').cycle({
    fx: 'scrollHorz',
    speed: 1250, 
    timeout: 5000,
    easing: 'easeInOutExpo',
    pager: '#slider-pagination',
    next: '#next-slide',
    prev: '#prev-slide',
    pause: 1
    nowrap: false, 
    end: function() { 
        // make it go to the first slide
    }
});

Answer 2

使用未记录的'bounce'选项：

$('#slider').cycle({
  fx: 'scrollHorz',
  speed: 1250, 
  timeout: 5000,
  easing: 'easeInOutExpo',
  pager: '#slider-pagination',
  next: '#next-slide',
  prev: '#prev-slide',
  pause: 1,
  bounce: true
});

希望这有帮助

Answer 3

看看你的网站，我可以告诉你已经解决了你的问题，但是我想发布这个以防万一其他人可能会发现它有价值。

您使用了jquery.scrollable，这是一个很好的解决方案，并为我解决了同样的问题。

jQuery Cycle：在最后一张幻灯片后滚动回第一张幻灯片

3 个答案: