如何重新定位主旋轉木馬之外的lightslider.js控件

Question

默認情況下，滑塊控件位於主旋轉木馬div內（附圖中的頂部線）。我希望控件分開定位，使它們不會出現在圖像的頂部（附圖中的底線）。

我可以看到在lightslider.js文件放置&位置的旋轉木馬控制的186線的相關代碼，但我不知道我不得不更改爲控件的位置主要轉盤股利之外。所有的

Answer 1

首先，你必須通過傳遞controls: false刪除默認的下一個/上一個按鈕。 然後創建您自己的next/prev按鈕並使用公共方法（goToPrevSlide(),goToNextSlide()）分別將滑塊轉換爲下一張和上一張幻燈片。

的Html

<ul id="lightSlider"> 
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg"> 
     <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" /> 
    </li> 
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg"> 
     <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" /> 
    </li> 
</ul> 
<button type="button" id="goToPrevSlide">Prev</button> 
<button type="button" id="goToNextSlide">Next</button> 

的Javascript

var slider = $('#lightSlider').lightSlider({ 
    controls: false 
}); 
$('#goToPrevSlide').on('click', function() { 
    slider.goToPrevSlide(); 
}); 
$('#goToNextSlide').on('click', function() { 
    slider.goToNextSlide(); 
}); 

這裏是的jsfiddle http://jsfiddle.net/2patspw2/1519/