lightSlider旁邊展示縮略圖

Question

所有按鈕，我需要創建lightSlider（http://sachinchoolur.github.io/lightslider/）的畫廊，有「顯示所有照片」旁邊的縮略圖/ .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鏈接到所有圖像。

希望這會有所幫助。