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

Question

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

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

​

​

Answer 1

首先，您必须通过传递controls: false来删除默认的next/prev按钮。然后创建您自己的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/

Answer 2

简单地说，我们可以覆盖Lightslider插件CSS来：

.lSSlideOuter {
    position: relative;
    overflow: visible;
}

并且覆盖相对于.lSSlideWrapper的静态的位置。

.lSSlideWrapper {
    position: static;
}

Answer 3

我尝试使用此命令将控件部分移到.LSSliderOuter部分之外。

jQuery(document).ready(function($){
    $('.lSAction').insertBefore('.lSSlideOuter');
});

然后，overflow: hidden属性不会影响控件，我可以使用CSS将它们移到外部。就像一个护身符。