I have successfully implemented a jQuery slider that allows me to click on the next arrow and slide to the next image. However, I am now facing the challenge of making it scroll continuously. This means that when I reach the last image in the slider, the first image should scroll in from the right. To achieve this, I attempted to use jQuery append. While it is appending the element correctly, I am running into an issue where the position being printed is showing the old position instead of the appended position.
<div id="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
//jQuery
numberOfSlides = 4; //Total number of images
$('arrow').click(function(){
if(currentSlide == 2)
{
$('first-child').append('parent');
}
else
{
for(var i = 0; i < numberOfSlides; i++)
{
$('.child:nth-child('+i+')').animate({'marginLeft','xxpx'}); // Sliding all images to the left
}
}
currentSlide++;
});
The correct output when currentSlide is at 2 should be -800, 0, 800, 1600 for slides 2, 3, 4, 1 respectively. In the code above, the if condition will append the first element to the parent element. However, when retrieving the position of the appended element, it is displaying as -1600px (based on Firebug inspection showing the div on the right), instead of the expected 1600px. I am using marginLeft for positioning.
Thank you!