HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Vertical cycle slideshow

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
cycleverticalslideshow

Problem

I want to make a vertical cycle slideshow. This works perfectly for me but I'm just wondering if it's possible to achieve the same functioning with a better code. I don't know if my code would provoke a problem in some situations or not.

jsFiddle

var pare = $('#slider'); // selecting the holder element;
var ob = $('#slider > li'); // selecting items to handle;
var elm_show = 3; //  number of imgs to show at once; 
var spd = 1000; // spd of scrolling;

var nex = ob.eq(0).height(); 
var leng = ob.length;
var jleng = leng-1;

ob.eq(jleng).css('top',-1*(leng*nex));// returning the last item to the first case;        
pare.height(nex*elm_show); // define the holder length to display the desired number of item to be shown;

function anime(){
ob.each(function(i,item){$(item).animate({"top":"+="+nex+"px"},spd,         

    "linear",function(){if ($(item).position().top == jleng*nex)
   {$(item).css('top',-1*nex*(i+1))}});})
 setTimeout(anime, 0);
 }

 anime();

Solution

I found your code a little hard on the eyes because of the lack of formatting.

function anime(){
ob.each(function(i,item){$(item).animate({"top":"+="+nex+"px"},spd,   

  "linear",function(){if ($(item).position().top == jleng*nex)
{$(item).css('top',-1*nex*(i+1))}});})
setTimeout(anime, 0);
}


Here is what it looks like with good formatting

function anime(){
    ob.each(function(i,item){
        $(item).animate( 
            {"top":"+="+nex+"px"},
            spd,
            "linear",
            function(){
                if ($(item).position().top == jleng*nex) {
                    $(item).css('top',-1*nex*(i+1))
                }
            }
        );
    })
    setTimeout(anime, 0);
}

Code Snippets

function anime(){
ob.each(function(i,item){$(item).animate({"top":"+="+nex+"px"},spd,   


  "linear",function(){if ($(item).position().top == jleng*nex)
{$(item).css('top',-1*nex*(i+1))}});})
setTimeout(anime, 0);
}
function anime(){
    ob.each(function(i,item){
        $(item).animate( 
            {"top":"+="+nex+"px"},
            spd,
            "linear",
            function(){
                if ($(item).position().top == jleng*nex) {
                    $(item).css('top',-1*nex*(i+1))
                }
            }
        );
    })
    setTimeout(anime, 0);
}

Context

StackExchange Code Review Q#125607, answer score: 2

Revisions (0)

No revisions yet.