0

https://codepen.io/predaytor/pen/VgaZXJ

body {
  margin: 0;
  background-color: #292929;
  justify-content: center;
  align-items: center;
  display: flex;
  height: 700px;
  width: 100%;
  position: relative;
}

.one {
  background-color: #fff;
}

.two {
  background-color: #A5B1F1;
}

.three {
  background-color: #E65E5E;
}

.slider {
  position: relative;
  height: 350px;
  width: 50%;
}

.slide {
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
  transition: all .2s ease;
}

.slide:nth-child(1) {
  bottom: 0px;
  transform: scale(0.9) translateY(30px);
  opacity: 0.5;
  z-index: 1
}

.slide:nth-child(2) {
  bottom: 7px;
  transform: scale(0.95) translateY(15px);
  opacity: 0.75;
  z-index: 2
}

.slide:nth-child(3) {
  bottom: 14px;
  z-index: 3;
}

.prev,
.next {
  position: absolute;
  top: 46%;
  cursor: pointer;
  color: #fff;
  font-size: 30px;
}

.next:hover {
  color: #E65E5E;
}

.prev:hover {
  color: #E65E5E;
}

.prev {
  left: 160px;
}

.next {
  right: 160px;
}
<div class="slider">
  <div class="slide one"></div>
  <div class="slide two"></div>
  <div class="slide three"></div>
</div>

<div class="next">Next</div>
<div class="prev">Prev</div>

При клике на "Next" слайды меняются местами (анимация z-оси).

1 - 3, 2 - 1, 3 - 2.

Сделал стилизацию классов :nth-child(n). Нужно создать массив элементов .slide с переписью со старой выборки массива. И так каждый раз при клике на Next, и наоборот при Prev.

Есть получше идеи как сделать такой слайдер с плавными переходами по оси z? Спасибо.

1
  • 1
    Что-то не видно кода вашего решения. Этот ресурс не поможет написать решение за вас
    – ArchDemon
    27 янв 2019 в 7:32

1 ответ 1

1

Вам необходимо именно самостоятельное решение данной задачи? Вы можете воспользоваться готовыми решениями вроде slick (http://kenwheeler.github.io/slick/) или swiper (http://idangero.us/swiper/). Быстро подключаются и довольно просто стилизуются.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.