EasySlider 1.7-当vertical = true和continuous = true时为空白面

Question

www.natebarnes.com is my site. I have my slider set to scroll vertically, to come out from behind the horizon graphic at the bottom of the screen.

When setting easyslider to scroll vertical and cycle contniuosly, it seems to be inserting a blank slide or something. It seems to be a common complaint on the 1.7 comment thread, however I've not found an answer for it. Any help would be a great relief. Thanks in advance!

Answer 1

If you use transparent images(gif or png), instead of matt's block of code

if(options.continuous && !options.vertical){
    $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
    $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
    $("ul", obj).css('width',(s+1)*w);
} else if(options.continuous && options.vertical) {
    $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-bottom","-"+ h +"px"));
    $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
    $("ul", obj).css('height',(s+1)*h);
};

use this one

if(options.continuous && !options.vertical){
    $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
    $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
    $("ul", obj).css('width',(s+1)*w);
} else if(options.continuous && options.vertical) {                 
    $("ul", obj).prepend($("ul li:first-child", obj).clone().css("margin-bottom","-"+ h +"px"));
    $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
    $("ul", obj).css('height',(s+1)*h);                
};

In this way last image won't be positioned below first one.

Answer 2

I ran into this same problem this morning and started Googling for answers... I didn't find any, so I dove into the code myself. I found an answer and I saw your question here so I thought I'd share. Please keep in mind that I am not the best Javascript coder ever, so there might be a more elegant solution than this, but it worked for me, so it might work for you. Here's what I changed - I've left out line numbers because, well, obviously, as you tweak the file, they will change.

First, you'll see this:

$("ul", obj).css('width',s*w);

It sets the width but, when it's vertical, you need to set the height. I changed it to this:

    if(!options.vertical) {
        $("ul", obj).css('width',s*w);
    } else {
        $("ul", obj).css('height',s*h);
    };

Now, if it's vertical you want, it sets a proper height. Second, there is this:

    if(options.continuous){
        $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
        $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
        $("ul", obj).css('width',(s+1)*w);
    }

I believe this is what causes the problem - It's appending the slide, but assuming you are moving horizontally. I believe the "blank slide" you and I saw is there... it's just one slide-width to the right, so we can't see it. I added code in case both vertical and continuous are true to instead append it to the bottom:

    if(options.continuous && !options.vertical){
        $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
        $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
        $("ul", obj).css('width',(s+1)*w);
    } else if(options.continuous && options.vertical) {
        $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-bottom","-"+ h +"px"));
        $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
        $("ul", obj).css('height',(s+1)*h);
    };

Essentially, it appends the slide to the bottom instead of the side. Now, I was also getting a weird push to my slides - each time the next came up, it would move to the left a little, until the slides were off the screen. That problem came up here:

    if(!options.vertical) {
            $("ul",obj).css("margin-left",(t*w*-1));
        } else {
            $("ul",obj).css("margin-left",(t*h*-1));
        }

Everything appears right, except the second margin-left should just be margin-top instead:

    if(!options.vertical) {
            $("ul",obj).css("margin-left",(t*w*-1));
        } else {
            $("ul",obj).css("margin-top",(t*h*-1));
        }

Once I made all those changes, the slider when vert=true && continuous=true worked fine. I also used the modified script on another page where I wanted vert=false and cont=true and it worked fine there, too, so it doesn't appear there were any side effects to these changes.

Hope it helps!

Answer 3

@vseMatt Also don't forget to add

if(options.vertical) {
    $("li", obj).css('float','none');
    $("li", obj).css('display','block');
}

This is needed when you use vertical slider in IE9. Without this, It consumed a whole day :/. Finally figured it out.

Answer 4

is because of the width / height of the slides. Make sure all are the same exactly size and also make the #slider to be the same width / height. Please let us know if this was the issue.