jquery - 使用 Angular Slick 轮播组件实现分层幻灯片

Question

我正在使用angular-slick (这是基于jquery的 slick )来实现轮播控制。我需要实现分层幻灯片，即一次应显示一张幻灯片，而左右两侧应显示两张幻灯片半隐藏。单击上一页/下一页时，下方幻灯片应位于顶部，顶部幻灯片应位于下方。

我试图使用 css/代码自定义它，但不知道该怎么做。以下是我的要求的模型。我还查看了 http://vasyabigi.github.io/angular-slick/ 给出的示例

请指教。

Answer 1

您应该能够通过 CSS 转换来做到这一点。基本上，缩小非事件幻灯片并为其提供适当的 z 索引会产生这种效果。例如:

$('.center').slick({
  arrows: true,
  centerMode: true,
  infinite: true,
  centerPadding: '250px',
  slidesToShow: 1,
  speed: 500,
  dots: true,
});

.content {
  width: 800px;
  margin: auto;
  background-color: #EBEBEB;
  height: 480px;
}
.slick-slide:not(.slick-center) {
  z-index: 0;
  transform: scale(0.8);
}
.slick-active.slick-center+.slick-slide+.slick-slide {
  z-index: 1;
}
.slick-active.slick-center+.slick-slide,
.slick-center+.slick-cloned {
  z-index: 2;
}
.slick-center {
  z-index: 3;
}
.slick-slide {
  position: relative;
  transition: transform 80ms;
}
.slide img {
  position: relative;
  transform: translateX(-50%);
  left: 50%;
}
.slick-prev {
  left: 10% !important;
}
.slick-next {
  right: 10% !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.css" rel="stylesheet" />
<link href="http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick-theme.css" rel="stylesheet" />
<script src="http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js"></script>

<div class="content">
  <div class="center">
    <div>
      <div class="slide">
        <img src="http://lorempixel.com/540/303/abstract" />
      </div>

    </div>
    <div>
      <div class="slide">
        <img src="http://lorempixel.com/540/303/animals" />
      </div>

    </div>
    <div>
      <div class="slide">
        <img src="http://lorempixel.com/540/303/business" />
      </div>

    </div>
    <div>
      <div class="slide">
        <img src="http://lorempixel.com/540/303/cats" />
      </div>

    </div>
    <div>
      <div class="slide">
        <img src="http://lorempixel.com/540/303/city" />
      </div>

    </div>
    <div>
      <div class="slide">
        <img src="http://lorempixel.com/540/303/food" />
      </div>

    </div>
  </div>
</div>

该示例没有使用 angular-slick，但原理应该是相同的。