时间戳

首页 > 解决方案 > How to create a slider in a stack layout

javascript - How to create a slider in a stack layout

问题描述

Hi I am trying to create a image slider with the following layout.enter image description here

Below is my markup

<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>

The goal is to acheive when any of the image is being clicked that pops up front and the rest will be inactive. Any help would be appreciated. DEMO

标签： javascriptjqueryhtmlcsssass

解决方案

I played with it and created a fork which should be a good start for you. :) 

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>

And here the demo: http://jsfiddle.net/cdwux03m/9/

推荐阅读