There is a LayerSlider slider on the site in which I want the navigation arrow buttons to be positioned in the lower right corner regardless of the number of slides, and therefore the number of bullets and at any screen resolution so that there are no gaps between the gaps, do not overlap each other - how can this to implement? IMPORTANT: without html editing! with a fixed number of slides sketched fidl
.ls-nav-prev { position: absolute; right: 87px; background-color: yellow; } .ls-nav-prev:before { content: "\f104"; display: block; font-family: 'fontawesome'; opacity: 0.7; color: #222; font-size: 40px; margin-left: 18px; } .ls-nav-next { position: absolute; right: 0; background-color: yellow; } .ls-nav-next:before { content: "\f105"; display: block; font-family: 'fontawesome'; opacity: 0.7; color: #222; font-size: 40px; margin-right: 18px; } .ls-bottom-slidebuttons { position: absolute; right: 32px; background-color: yellow; width: auto; padding: 12px; } .ls-bottom-slidebuttons>a:before { content: "\f111"; display: inline-block; font-family: 'fontawesome'; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="list1"> <a class="ls-nav-prev" href="#" style="visibility: visible;"></a> <a class="ls-nav-next" href="#" style="visibility: visible;"></a> <div> <span class="ls-bottom-slidebuttons"> <a href="#" class=""></a> <a href="#" class="ls-nav-active"></a> </span> </div>
<span class="ls-bottom-slidebuttons">- Vasya