如何在堆栈布局中创建滑块

Question

您好，我正在尝试创建具有以下布局的图像滑块。

下面是我的标记

<ul class="stack__slider--list">
  <li class="stack__slider--item">
    <figure></figure>
  </li>
  <li class="stack__slider--item">
    <figure></figure>
  </li>
  <li class="stack__slider--item">
    <figure></figure>
  </li>
  <li class="stack__slider--item">
    <figure></figure>
  </li>
  <li class="stack__slider--item">
    <figure></figure>
  </li>
  <li class="stack__slider--item">
    <figure></figure>
  </li>
</ul>

我们的目标是在单击任何一个弹出的图像时实现目标，而其余图像将处于非活动状态。任何帮助，将不胜感激。 DEMO

Answer 1

我玩过它并创建了一个分叉，这对你来说应该是一个好的开始。 :)

function swapItem(event, elem) {
  elem.parentNode.insertBefore(elem, elem.parentNode.firstChild);
}

var items = document.querySelectorAll('.stack__slider--item');

items.forEach(item => {
  item.addEventListener('click', (e) => {
    swapItem(e, item);
  });
});

* {
  margin: 0;
  padding: 0;
}

.stack__slider--list {
  position: relative;
  min-width: 502px;
  height: 402px;
}

.stack__slider--item {
  position: absolute;
  list-style-type: none;
  width: 521px;
  height: 402px;
  background-color: #fff;
  transition: all .3s ease-out;
  padding: 20px;
}

.stack__slider--item:nth-of-type(1) {
  margin-left: 5px;
  z-index: 6;
}

.stack__slider--item:nth-of-type(2) {
  margin-left: 75px;
  z-index: 5;
}

.stack__slider--item:nth-of-type(3) {
  margin-left: 145px;
  z-index: 4;
}

.stack__slider--item:nth-of-type(4) {
  margin-left: 215px;
  z-index: 3;
}

.stack__slider--item:nth-of-type(5) {
  margin-left: 285px;
  z-index: 2;
}

.stack__slider--item:nth-of-type(6) {
  margin-left: 355px;
  z-index: 1;
}

.stack__slider--item:nth-of-type(1) {
  transform: scale(0.9);
}

.stack__slider--item:nth-of-type(2) {
  transform: scale(0.8);
}

.stack__slider--item:nth-of-type(3) {
  transform: scale(0.7);
}

.stack__slider--item:nth-of-type(4) {
  transform: scale(0.6);
}

.stack__slider--item:nth-of-type(5) {
  transform: scale(0.5);
}

.stack__slider--item:nth-of-type(6) {
  transform: scale(0.4);
}

.stack__slider--item:not(:first-of-type) {
  opacity: .5;
}

.stack__slider--item button {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.stack__slider--item figure {
  transform-origin: right;
  height: 402px;
  background: #D8D8D8;
  border: 1px solid #FFFFFF;
  background-size: cover;
  background-color: #fff;
  background-image: url("https://via.placeholder.com/150");
  background-position: center;
}

.one {
  background: red;
}

.two {
  background: orange;
}

.three {
  background: yellow;
}

.four {
  background: purple;
}

.five {
  background: blue;
}

<ul class="stack__slider--list">
  <li class="stack__slider--item one">
    <figure></figure>
  </li>
  <li class="stack__slider--item two">
    <figure></figure>
  </li>
  <li class="stack__slider--item three">
    <figure></figure>
  </li>
  <li class="stack__slider--item four">
    <figure></figure>
  </li>
  <li class="stack__slider--item five">
    <figure></figure>
  </li>
  <li class="stack__slider--item six">
    <figure></figure>
  </li>
</ul>

这里是演示：http://jsfiddle.net/cdwux03m/9/