When the slide gets to the second "1", I need it to seamlessly reset to slide "2" and give the impression of infinite carousel,
The demo:
http://jsfiddle.net/benhowdle89/cWTbn/
The code:
$('.wrapper li:first').clone().appendTo($('.wrapper ul'));
var element = $('.wrapper')[0];
element.setAttribute('data-left', 0);
setInterval(function() {
var mL = +element.getAttribute('data-left'), t = +$('.wrapper').css('width').replace('px', ''), w = +$('.wrapper li:first').outerWidth();
if(t == (Math.abs(mL) + w)){
element.style.webkitTransitionTimingFunction = "none";
element.style.webkitTransform = "none";
element.setAttribute('data-left', 0);
}
element.style.webkitTransitionDuration = "0.3s";
element.style.webkitTransitionTimingFunction = "ease-out";
var currentL = +element.getAttribute('data-left');
var newL = +(currentL + w);
element.style.webkitTransform = "translate3d(-" + (newL) + "px, 0, 0)";
element.setAttribute('data-left', newL);
}, 2000);
The problem:
After slide "1", it animates back to slide "2", so I need it not to, but to snap back to slide "2" (not visual to the user),
Any ideas?
Move the animation to a separate class. Since you're already using jQuery, you can use the following:
$('.animiationClass').removeClass('animationClass').addClass('animationClass');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.