lightSlider hiển thị tất cả các nút bên cạnh hình thu nhỏ

Question

Tôi cần tạo thư viện lightSlider (http://sachinchoolur.github.io/lightslider/) trong đó có "Hiển thị tất cả ảnh" bên cạnh hình thu nhỏ/.IsPager (nếu hình thu nhỏ là> = 5 nút hiển thị).

Tôi đã cố gắng thực hiện theo vị trí: tuyệt đối nhưng hiển thị tất cả nút trên hình thu nhỏ cuối cùng.

$('#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 cần được sắp xếp ở giữa.

Answer 1

Ok, do đó, điều này sẽ có một chút khó khăn nhưng nó hầu như hoạt động.

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

Đừng quên rằng "Xem tất cả ảnh" đang diễn ra với phương pháp append tại

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

PS: Đối với các vấn đề hình ảnh cuối cùng, bạn có thể đặt "Xem tất cả ảnh" hình ảnh và liên kết nó với tất cả các hình ảnh như JsFiddle.

Hy vọng điều này sẽ hữu ích.