LightSlider show all buttons next to thumbnails

Question

I need to create a lightSlider ( http://sachinchoolur.imtqy.com/lightslider/ ) gallery, where there is next to the "Show all photos" /.IsPager thumbnails (if the thumbnails are count> = 5 show button).

I tried to do this by position: absolute, but show all the buttons above the last sketch.

$('#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.imtqy.com/lightslider/img/thumb/cS-1.jpg"> <img src="http://sachinchoolur.imtqy.com/lightslider/img/cS-1.jpg" /> </li> <li data-thumb="http://sachinchoolur.imtqy.com/lightslider/img/thumb/cS-2.jpg"> <img src="http://sachinchoolur.imtqy.com/lightslider/img/cS-2.jpg" /> </li> <li data-thumb="http://sachinchoolur.imtqy.com/lightslider/img/thumb/cS-3.jpg"> <img src="http://sachinchoolur.imtqy.com/lightslider/img/cS-3.jpg" /> </li> <li data-thumb="http://sachinchoolur.imtqy.com/lightslider/img/thumb/cS-4.jpg"> <img src="http://sachinchoolur.imtqy.com/lightslider/img/cS-4.jpg" /> </li> <li data-thumb="http://sachinchoolur.imtqy.com/lightslider/img/thumb/cS-5.jpg"> <img src="http://sachinchoolur.imtqy.com/lightslider/img/cS-5.jpg" /> </li> <li data-thumb="http://sachinchoolur.imtqy.com/lightslider/img/thumb/cS-6.jpg"> <img src="http://sachinchoolur.imtqy.com/lightslider/img/cS-6.jpg" /> </li> <li data-thumb="http://sachinchoolur.imtqy.com/lightslider/img/thumb/cS-7.jpg"> <img src="http://sachinchoolur.imtqy.com/lightslider/img/cS-7.jpg" /> </li> <li data-thumb="http://sachinchoolur.imtqy.com/lightslider/img/thumb/cS-8.jpg"> <img src="http://sachinchoolur.imtqy.com/lightslider/img/cS-8.jpg" /> </li> <li data-thumb="http://sachinchoolur.imtqy.com/lightslider/img/thumb/cS-9.jpg"> <img src="http://sachinchoolur.imtqy.com/lightslider/img/cS-9.jpg" /> </li> <li data-thumb="http://sachinchoolur.imtqy.com/lightslider/img/thumb/cS-10.jpg"> <img src="http://sachinchoolur.imtqy.com/lightslider/img/cS-10.jpg" /> </li> <li data-thumb="http://sachinchoolur.imtqy.com/lightslider/img/thumb/cS-11.jpg"> <img src="http://sachinchoolur.imtqy.com/lightslider/img/cS-12.jpg" /> </li> <li data-thumb="http://sachinchoolur.imtqy.com/lightslider/img/thumb/cS-13.jpg"> <img src="http://sachinchoolur.imtqy.com/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> 

The pager should be aligned in the middle.

Answer 1

Good, so it will be a little complicated, but it almost works.

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

Don’t forget that now “View all photos” comes with the append method

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

PS: For the last problem with the image, you can put the “View all photos” image and link it to all the images as JsFiddle.

Hope this helps.