CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Anish
Anish

Reputation: 2927

Scrolling Div Continuously in jQuery

I have created jquery slider that will slide a next image when i click the next arrow. Now i need to show it continuously.(i.e) If a reach the last image in a slider. Then the first Image should scroll from the right. for that i tried jquery append. it's appending. But when i print the position it shows the old position.not the appended position.

<div id="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
(i.e)//jQuery
numberOfSlides = 4; //Total no of images
$('arrow').click(function(){
if(currentSlide == 2) //if i am in the second slide, then append first slide to the last slide
{
   $('first-child').append('parent'); // This code is for reference. not in correct syntax.
}
else
{
  for()//loop
  { 
    //sliding all images to the left (i.e)if the image width is 800px. then the slide animation will be  -800,0,800,1600 for(slide1,slide2,slide3,slide4).so that second image will show now.
   $('.child:nth-child('+loop_count+')').animate({'marginLeft','xxpx'});
  }
}
currentSlide++;
});

The correct o/p when currentSlide 2 is -800,0,800,1600 for(slide2,slide3,slide4,slide1) In the above code if condition will append the first element to the parent element. But when i get the position of the appended element it is printing some -1600 px(when i check with the firebug,it is showing the div on the right side). but it should be 1600px; I am using marginLeft for positioning.

Thanks

Upvotes: 1

Views: 874

Answers (1)

Swati Singh
Swati Singh

Reputation: 1863

http://archive.plugins.jquery.com/project/aautoscroll

or

You'll need to duplicate your content element and align them so that they're vertically next to each other, and scroll them in tandem. Your current scrolling should work, the jump will be invisible because it should jump from the top of the bottom element to the top of the top element, that is, to a same-looking part. I'd put both copies of the content (you can just .clone it to get the other copy) in a container and scroll that, that way you don't have to worry about moving two elements.

If you want to really optimize it, you could only display the top part (enough to hide the jump) of the content in the bottom element, but unless your content is really complex and heavy, it's not worth the effort.

Upvotes: 1

Related Questions