默认情况下, slider 控件位于主轮播 div 内(附图中的顶行)。我希望控件单独放置,这样它们就不会出现在图像的顶部(附图中的底线)。
我可以在lightslider.js的第186行看到相关代码放置和定位轮播控件的文件,但我不知道我必须更改什么才能将控件定位在主轮播 div 之外。
最佳答案
首先,您必须通过传递 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/
关于javascript - 如何在主旋转木马之外重新定位 lightslider.js 控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33096366/