Question

我需要创建lightSlider（http://sachinchoolur.github.io/lightslider/）图库，其中缩略图/ .IsPager旁边有“显示所有照片”（如果缩略图计数为＆gt; = 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/

不要忘记“查看所有照片”现在采用附加方法

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

P.S：对于最后一个图像问题，您可以将“查看所有照片”图像并将其链接到所有图像作为JsFiddle。

希望这会有所帮助。

lightSlider显示缩略图旁边的所有按钮

1 个答案: