如何在主轮播之外重新定位 lightslider.js 控件

Question

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

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

Answer 1

首先，您必须通过 controls: false 删除默认的 next/prev 按钮。然后创建您自己的 next/prev 按钮并使用 public 方法（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 将它们移到外面。工作得很好。

如何在主轮播之外重新定位 lightslider.js 控件

How to reposition lightslider.js controls outside of the main carousel

javascript

jquery

slider