CODEWITHSUNDEEP
jqueryscrollsliderinfinite
Kadir Çetintaş
Kadir Çetintaş

Reputation: 207

Infinite vertical scroll div element

I have sample to vertical scroll slider

[sample] : http://jsfiddle.net/e5dtyLjw/

I want to do this sample like infinite, on the sample when scroll is end, its going to top I dont want it, i want to it like infinite

Here is my code:

var itemCount = 10, activeScroll = 0, countScroll = 0;
setInterval(function() {
    if(countScroll == (itemCount - 6)) {
        activeScroll = 0;
        countScroll = 0;
        $('#list').animate({scrollTop: 0});
    }
    else {
        activeScroll += 40;
        countScroll += 1;
        $('#list').animate({scrollTop: activeScroll});            
    }
}, 1000);

update: I did try something new, I want it just like that but this way. There is no effect :/

http://jsfiddle.net/e5dtyLjw/2/

Upvotes: 0

Views: 6029

Answers (2)

FabioStein
FabioStein

Reputation: 920

Reorder the <li> elements

The fourth argument of jQuery.animate is a completion callback. Set the animation to ONLY scroll each item, and the callback to reorder the elements themselves

$element
    .scrollTop(0) // force us back to the top
    .find('span:last') // grab the last element 
    .after($('span:first', this)) // move the first element AFTER the current last element
;

Complete Solution

I prefer the linear movement, so I've set the scroll animation's duration (950) very close to the timeout duration (1000). This makes the whole thing look like a constant linear scroll. Set scroll to 100 to see what I'm talking about. 

var options = {
    scroll: 950, // duration of scroll animation between each item
    pause: 1000, // time to stop on each item
    height: 40   // outer-height of element (height and padding), should instead be calculated
};

setInterval(function(){
    $('#list').stop().animate({scrollTop:options.height},options.scroll,'linear',function(){
        $(this).scrollTop(0).find('span:last').after($('span:first', this));  // shift the order of the LI elements
    });
}, options.pause);

http://jsfiddle.net/FabioLux/hfa2mu0f/

Upvotes: 1

BorisTB
BorisTB

Reputation: 1806

if I understand you right, this is what you're looking for

setInterval(function(){
    $('#list').stop().animate({scrollTop:40},400,'swing',function(){
        $(this).scrollTop(0).find('span:last').after($('span:first', this));
    });
}, 1000);

JSFiddle

You have to use .animate() if you want that slide effect

Upvotes: 6

Related Questions