EasySlider 1.7 - 當vertical = true且連續時= true時的空白邊

Question

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

當easyslider設置爲垂直滾動並循環運行時，它似乎插入了空白滑塊或其他東西。這似乎是1.7評論主題上的一個常見抱怨，但我沒有找到答案。任何幫助將是一個很大的解脫。提前致謝！

Answer 1

今天早上我遇到了同樣的問題，並開始使用谷歌搜索答案......我沒有找到任何答案，所以我自己編寫代碼。我找到了答案，我在這裏看到你的問題，所以我想我會分享。請記住，我並不是最好的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)); 
     } 

一切看起來不錯，只不過第二利潤率左應該只是邊距來代替：

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 2

是因爲幻燈片的寬度/高度。確保所有尺寸完全相同，並使＃滑塊的寬度/高度相同。請讓我們知道這是否是問題。

Answer 3

@vseMatt另外不要忘記添加

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

，當你在IE9使用垂直滑塊這是必要的。沒有這個，它會消耗一整天：/。最後算出來了。

Answer 4

如果使用透明圖像（GIF或PNG），而不是代碼無光澤的塊

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

以這種方式最後的圖像將不被位於其下方的第一一。