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 开发者_Go百科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
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
}
});
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
Looking at your website, I can tell you already solved your problem, but I wanted to post this in case there were others who might find it valuable.
You used jquery.scrollable
, which is a great solution and solved the same issue for me.
精彩评论