I have a horizontal scroller.
How to stop animations when last element reached?
Using offset? width? position?...
How to achieve to stop any animation if there is no more elements to display? But allowing to go back?
I have two buttons: PREV and NEXT; this buttons allow the user to view pages. There are 7 pages starting from page 4.
Thanks in advance
$('#page_holder').animate({left: '-=546px'}, 0);
$('.prev').click(function(){
$('#page_holder').animate(
{left: '+=182px'},{
duration: 1000,
easing: 'easeOutBack'
});
});
$('.next').click(function(){
$('#page_holder').animate(
{left: '-=182px' },{
duration: 1000,
easing: 'easeOutBack'
});
});
Since there's already an overflow-hidden
, parent we can change it's scrollLeft
position:
var $par = $('#container').scrollLeft(546) ; // Get the element that has CSS overflow
// and set to initial position
$('.prev, .next').click(function( e ) {
e.preventDefault(); // Prevent default Anchors behavior
var n = $(this).hasClass("next") ? "+=182" : "-=182"; // Direction
$par.stop().animate({scrollLeft: n});
});