title: How to reposition lightslider.js controls outside of the main carousel
body: <p>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).</p>
  
  <p>I can see the relevant code on line 186 of the <a href="https://github.com/sachinchoolur/lightslider/blob/master/src/js/lightslider.js" rel="noreferrer">lightslider.js</a> file that places &amp; 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.</p>
  
  <p><a href="https://i.stack.imgur.com/4db9Q.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/4db9Q.jpg" alt="enter image description here"></a></p>