javascript - 如何在主旋转木马之外重新定位 lightslider.js 控件

Question

默认情况下， slider 控件位于主轮播 div 内(附图中的顶行)。我希望控件单独放置，这样它们就不会出现在图像的顶部(附图中的底线)。

我可以在lightslider.js的第186行看到相关代码放置和定位轮播控件的文件，但我不知道我必须更改什么才能将控件定位在主轮播 div 之外。

Answer 1

首先，您必须通过传递 controls: false 来删除默认的下一个/上一个按钮。然后创建您自己的下一张/上一张按钮并使用公共(public)方法(goToPrevSlide()、goToNextSlide())分别将 slider 转换为下一张和上一张幻灯片。

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/