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? Спасибо.