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

发布于 2024-10-03 23:46:10 字数 501 浏览 4 评论 0原文

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

$('#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，所以我不能使用与它们相同的插件。

如何才能做到这一点？

谢谢

原文

I have a slider that looks like this:

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

By default, when it's on the last slide Cycle just scrolls to the left again to start over, as though it's an infinite loop. I want it to scroll back through all the slides and land on the first one again. Much like it does here (see the last slide): http://www.iconlicious.com/. I must use Cycle, so I can't use the same plugin as they are.

How can that be achieved?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

天生の放荡 2024-10-10 23:46:10

解决方案是将 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
    }
});

The solution is to set the nowrap option to false.

While I can't test anything, you probably will have to use the end option to define a function to return to the beginning.

So, something like:

$('#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
    }
});

回复收藏 0 原文

挽手叙旧 2024-10-10 23:46:10

使用未记录的“反弹”选项：

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

希望这有帮助

Use the not documented 'bounce' option:

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

Hope this helps

回复收藏 0 原文