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

Question

默认情况下,滑块控件位于主旋转木马div内(附加图像中的顶行).我希望控件分开放置,这样它们就不会出现在图像的顶部(附图中的底线).

我可以在lightslider.js文件的第186行看到放置和定位轮播控件的相关代码,但我不知道我需要更改什么来将控件放在主旋转木马div之外.

Answer 1

首先,您必须通过传递删除默认的next/prev按钮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/