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

Question

By default, the slider controls are positioned inside the main carousel div (top line in attached image). I want the controls to be separately positioned so they don't appear on top of the images (bottom line in attached image).

I can see the relevant code on line 186 of the lightslider.js file that places & positions the carousel controls but I don't know what I'd have to change to position the controls outside of the main carousel div.

Answer 1

First of all you have to remove the default next/prev buttons by passing controls: false. Then create your own next/prev buttons and use public methods (goToPrevSlide() , goToNextSlide()) to translate the slider to next and previous slides respectively.

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();
});

Here is the jsfiddle http://jsfiddle.net/2patspw2/1519/

Answer 2

Simply we can override the Lightslider plugin CSS to :

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

and override the position relative to static of .lSSlideWrapper.

.lSSlideWrapper {
    position: static;
}