Currently, I am developing a coverflow image slider with jQuery animate. However, there are two issues that I am facing. Firstly, when the animation runs for the first time, it starts at `0` instead of `-500`. Secondly, after reaching the end and looping back to the beginning, the animation does not start from the initial position as expected; instead, it animates from the end back to the beginning.
I have attempted to find a solution to make the animation start at a specific value without success.
The desired behavior is for the animation to start from the specified value without jumping to `0` initially. Additionally, when looping back to the start, it should transition smoothly from the current position rather than animating from the end to the beginning.
$(document).ready(function() {
$('.slides_container div:first').addClass('previous_slide');
$('.slides_container div:nth-child(2)').addClass('current_slide');
$('.slides_container div:nth-child(3)').addClass('next_slide');
});
var options = {
autoplay: 1000,
sliderTransitionSpeed: 1200,
transitionAnimation: '',
};
jQuery(document).ready(function() {
if (options.autoplay > 0) {
setInterval(function() {
moveRight();
}, options.autoplay);
}
if (options.transitionAnimation == 'slider') {
jQuery('#slider').addClass('slider');
} else if (options.transitionAnimation == 'coverflow') {
jQuery('#slider').addClass('coverflow');
} else {
jQuery('#slider').addClass('slider');
}
var slideCount = $('#slider .slides_container div').length;
var slideWidth = $('#slider .slides_container div').width();
var slideHeight = $('#slider .slides_container div').height();
var sliderContainerWidth = slideCount * slideWidth;
$('#slider .slides_container').css({
transform: "translate3d(" + -slideWidth + "px, 0px, 0px)"
});
// Rest of the code snippets are unchanged
Here's a link to my fiddle for reference: http://jsfiddle.net/JostiFrank/ecr2bzsL/1/