Infinite smooth horizontal scrolling without a plugin?

Question

I would like to create an infinite scroll of div without using additional plugins (besides jquery). I found this: http://www.smoothdivscroll.com/

The problem is not only in its own plugin, but also in jqueryUI ... adding a bunch of code weight.

That's what i

<div id="columnWrapper"> <div id="columnSlider"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> </div> 

For javascript, I have a timer set every 10 milliseconds, each time processing the left field of the enitre #columnScroll for a few pixels.

 var sliderInt=self.setInterval(function(){ $('#columnSlider').css('margin-left',totalMargin); totalMargin -= .5; },10); 

I really need the left side of #columnSlider and the right side of the same div to end when the left side is disconnected from the screen (so that it scrolls endlessly).

Thanks in advance

Answer 1

You can try something like this, it is actually a plugin that I wrote for reuse, but you can extract it from the plugin form as shown below, you just need to add the correct elements and change the links to the elements, I think that it is currently a vertical scroll, but is easy to change:

 function initInfiniteScroll(){ var $carousel, $prevTrigger, $nextTrigger, itemHeight; $carousel = $('#alternate-views'); $prevTrigger = $('.scroll-up'); $nextTrigger = $('.scroll-down'); itemHeight = 106; $allItems = $carousel.children().clone(); $allItems.appendTo($carousel); $allItems.prependTo($carousel); $prevTrigger.click(function() { scrollCarousel('up'); return false; }); $nextTrigger.click(function() { scrollCarousel(); return false; }); function scrollCarousel(direction) { if (direction == 'up') { $carousel.animate({ 'top': '+=' + itemHeight },1000,function(){ $carousel.children(':last').clone().prependTo($carousel); $carousel.children(':last').remove(); $carousel.css({'top':'-' + itemHeight + 'px'}); }); } else { $carousel.animate({ 'top': '-=' + itemHeight },1000,function(){ $carousel.children(':first').clone().appendTo($carousel); $carousel.children(':first').remove(); $carousel.css({'top':'-' + itemHeight + 'px'}); }); } } } 

This clones the entire load and also places it on both sides of the original scroller - but you can remove it, also if you use jquery 1.4+, you can output the cloning and disconnect and re-add the elements instead as you scroll.

Also - if you want to make setTimeout, just use the content from the click function and place a timer around it. Hope this helps.