Как изменить положение элементов управления lightslider.js за пределами основной карусели

Question

По умолчанию элементы управления ползунками расположены внутри основного карусельного div (верхняя строка в прикрепленном изображении). Я хочу, чтобы элементы управления были расположены отдельно, чтобы они не отображались поверх изображений (нижняя строка в прикрепленном изображении).

я могу увидеть соответствующий код в строке 186 lightslider.js файла, который помещает & позиции элементов управления карусельным, но я не знаю, что я должен изменить, чтобы расположить элементы управления за пределами основных карусельных дел.

Answer 1

Прежде всего, вы должны удалить следующие кнопки/предыдущая значение по умолчанию, передавая controls: false. Затем создайте свои собственные кнопки 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/