EasySlider 1.7-當vertical = true和continuous = true時為空白面

Question

www.natebarnes.com是我的網站。 我將滑塊設置為垂直滾動，以從屏幕底部的地平線圖形后面出來。

將easyslider設置為垂直滾動並連續循環時，似乎正在插入空白幻燈片或其他內容。 在1.7注釋線程上，這似乎是一個普遍的抱怨，但是我還沒有找到答案。 任何幫助將是一個極大的緩解。 提前致謝！

Answer 1

如果您使用透明圖像（gif或png），而不是matt的代碼塊

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);
};

用這個

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);                
};

這樣，最后一張圖片將不會位於第一張圖片的下方。

Answer 2

今天早上，我遇到了同樣的問題，並開始使用Google搜索以尋找答案……我沒有找到任何答案，所以我自己研究了代碼。 我找到了答案，並且在這里看到了您的問題，所以我想與您分享。 請記住，我不是有史以來最好的Javascript編碼器，因此可能會有比這更好的解決方案，但是它對我有用，所以對您來說可能有用。 這就是我更改的內容-我省略了行號，因為很明顯，當您調整文件時，它們會更改。

首先，您將看到以下內容：

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

它設置寬度，但是在垂直時，您需要設置高度。 我將其更改為：

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

現在，如果您想要的是垂直的，它會設置適當的高度。 其次，是這樣的：

    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);
    }

我相信這就是導致問題的原因-它是在附加幻燈片，但假設您水平移動。 我相信您和我看到的“空白幻燈片”都在那兒……它只是右側的一個幻燈片寬度，所以我們看不到它。 我添加了代碼，以防垂直和連續都適用，而是將其追加到底部：

    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);
    };

本質上，它將幻燈片附加到底部而不是側面。 現在，我也被怪異地推到了幻燈片上-每次下一張幻燈片出現時，它都會向左移動一點，直到幻燈片離開屏幕為止。 這個問題出現在這里：

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

一切看起來都正確，除了左邊第二個margin應當位於margin-top之外：

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

完成所有這些更改后，當vert = true && Continuous = true時的滑塊工作正常。 我還在另一頁上使用了經過修改的腳本，在該頁上我想要vert = false和cont = true，並且在那兒也能正常工作，因此這些更改沒有出現任何副作用。

希望能幫助到你！

Answer 3

@vseMatt也不要忘記添加

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

在IE9中使用垂直滑塊時，這是必需的。 沒有這個，它消耗了整整一天的時間：/。 終於想通了。

Answer 4

是因為幻燈片的寬度/高度。 確保所有尺寸都完全相同，並且#slider的寬度/高度都相同。 如果這是問題，請告訴我們。