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

【问题标题】：How to reposition lightslider.js controls outside of the main carousel如何在主轮播之外重新定位lightslider.js控件
【发布时间】：2015-10-13 07:14:49
【问题描述】：

默认情况下，滑块控件位于主轮播 div 内（附加图像的顶行）。我希望将控件分开放置，这样它们就不会出现在图像顶部（附加图像的底线）。

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

【问题讨论】：

你可以创建一个问题fiddle。我觉得问题出在你的另一个CSS..

标签： javascript jquery slider

【解决方案1】：

首先，您必须通过传递controls: false 来删除默认的下一个/上一个按钮。然后创建自己的下一张/上一张按钮并使用公共方法（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/

【讨论】：

【解决方案2】：

我们可以简单地将 Lightslider 插件 CSS 覆盖为：

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

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

.lSSlideWrapper {
    position: static;
}

【讨论】：

【解决方案3】：

我尝试使用此将控制部分移到 .LSSliderOuter 部分之外

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

然后overflow: hidden 属性没有提供控件，我可以使用 CSS 将它们移到外面。像魅力一样工作。

【讨论】：