Как создать слайдер в макете стека

Привет, я пытаюсь создать слайдер изображения со следующим макетом.

Ниже моя разметка

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

Цель состоит в том, чтобы добиться результата, когда щелкают любое изображение, которое всплывает впереди, а остальные будут неактивными. Любая помощь будет оценена. ДЕМО

javascript jquery html css sass

15.11.2018 10:31

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 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/

Привет @aslam, спасибо за помощь. Но, как вы видите на изображении, которое я прикрепил, например, если вы нажмете на 3-е изображение, первые 2 изображения переместятся влево, а 3-е окажется сверху, а остальные останутся справа.

— 15.11.2018 12:04

15.11.2018 11:20