lightSlider 썸네일 옆에있는 버튼을 모두 표시합니다.

Question

썸네일/.IsPager 옆에 "모든 사진 표시"갤러리가 필요합니다 (썸네일 수가 5보다 작 으면 표시 버튼).

나는 위치별로 그것을 시도했다 : 절대적으로 그러나 모든 단추가 마지막 엄지 손톱에다는 것을 보여준다.

$('#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>

호출기는 중간에 정렬 될 필요가있다.

Answer 1

그래, 조금 까다 롭 겠지만 거의 작동합니다. 마지막 이미지의 문제를 들어, 이미지 "모든 사진보기"를 넣을 수 있습니다 :

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

는 지금 APPEND 방법

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

PS와 것입니다 "모든 사진 참조"잊지 마세요 그것을 모든 이미지에 JsFiddle로 연결합니다.

희망이 도움이 될 것입니다.