lightSlider Pokaż wszystkie przyciski obok miniatur

Question

Potrzebuję utworzyć galerię lightSlider (http://sachinchoolur.github.io/lightslider/), w której znajduje się "Pokaż wszystkie zdjęcia" obok miniaturek/.IsPager (jeśli miniatura liczy się> = 5 przycisk show).

Próbowałem zrobić to według pozycji: bezwzględna, ale pokazuję, że przycisk jest nad ostatnią miniaturą.

$('#lightSlider').lightSlider({ 
 
    gallery: true, 
 
    item: 1, 
 
    loop: true, 
 
    slideMargin: 0, 
 
    thumbItem: 6 
 
});

.demo { 
 
    width: 420px; 
 
    position: relative; 
 
} 
 
ul { 
 
    list-style: none outside none; 
 
    padding-left: 0; 
 
    margin-bottom: 0; 
 
} 
 
li { 
 
    display: block; 
 
    float: left; 
 
    margin-right: 6px; 
 
    cursor: pointer; 
 
} 
 
img { 
 
    display: block; 
 
    height: auto; 
 
    max-width: 100%; 
 
} 
 
.show-all { 
 
    width: 80px; 
 
    height: auto; 
 
    background-color: #eee; 
 
    border: 1px #ddd; 
 
    float: left; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script> 
 

 
<div class="demo"> 
 
    <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> 
 
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg"> 
 
     <img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" /> 
 
    </li> 
 
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg"> 
 
     <img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" /> 
 
    </li> 
 
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg"> 
 
     <img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" /> 
 
    </li> 
 
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg"> 
 
     <img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" /> 
 
    </li> 
 
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg"> 
 
     <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" /> 
 
    </li> 
 
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg"> 
 
     <img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg" /> 
 
    </li> 
 
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg"> 
 
     <img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg" /> 
 
    </li> 
 
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg"> 
 
     <img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg" /> 
 
    </li> 
 
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg"> 
 
     <img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg" /> 
 
    </li> 
 
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg"> 
 
     <img src="http://sachinchoolur.github.io/lightslider/img/cS-13.jpg" /> 
 
    </li> 
 
    </ul> 
 
    <!-- show all is not part of thumnail list, but next to it --> 
 
    <div class="show-all"> 
 
    <i class="fa fa-camera" aria-hidden="true"></i> 
 
    <span>Show all photos</span> 
 
    </div> 
 
</div>

Pager należy wyrównać w środku.

Answer 1

Ok, więc to będzie trochę trudne, ale prawie działa.

https://jsfiddle.net/590f2t74/1/

Nie zapomnij, że „Zobacz wszystkie zdjęcia” będzie metodą dopisywania teraz

$(".lSSlideOuter").append('<div class="show-all"><i class="fa fa-camera" aria-hidden="true"></i><span>Show all photos</span></div>'); 

PS: W ostatnim numerze obrazu, można umieścić „Zobacz wszystkie zdjęcia” image i połącz to ze wszystkimi obrazami jako JsFiddle.

Mam nadzieję, że to pomoże.