Следуя связанному вопросу, который я разместил на прошлой неделе, я создал пользовательскую карусель который использует clip-path для предоставления фрагмента следующего и предыдущего слайдов. В настоящее время это работает функционально, но теперь мне нужно применить некоторые анимации при отображении/скрытии слайдов.
В связанном вопросе требовалась только функция «следующий слайд», и было предложено решение обрезать «активный» слайд. Однако теперь, поскольку нам нужно сделать следующий и предыдущий слайды, я вместо этого применил клип к следующему и предыдущему слайдам. Код следующим образом:
$(document).ready(function() {
$('.slide').click(function() {
var current = $(this);
var prev = current.prev('.slide');
var next = current.next('.slide');
$('.slide').removeClass('active next prev');
if (current.hasClass('prev')) {
current.addClass('active').removeClass('prev');
} else {
current.addClass('active').removeClass('next');
}
if (prev.length) {
prev.addClass('prev');
} else {
$('.slide:last').addClass('prev');
}
if (next.length) {
next.addClass('next');
} else {
$('.slide:first').addClass('next');
}
});
});* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.banners {
position: relative;
background: #000;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0 auto;
}
.slide {
display: block;
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
text-align: center;
z-index: 1;
}
.slide.active {
z-index: 2;
}
.slide.next {
clip-path: polygon(100% 100%, 55% 100%, 100% 67%);
}
.slide.prev {
clip-path: polygon(44% 0, 0 30%, 0 0);
}
.slide.next,
.slide.prev {
z-index: 3;
cursor: pointer;
}
.slide .image {
height: 100%;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.content {
color: #FFF;
display: inline-block;
vertical-align: middle;
font-family: arial;
text-transform: uppercase;
font-size: 24px;
}
.spanner {
vertical-align: middle;
width: 0;
height: 100%;
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banners">
<div class="slide active">
<div class="image" style="background-image: url('http://imageshack.com/a/img924/2127/SNvipw.jpg');">
<div class="content">
Slide 1
</div>
<div class="spanner"></div>
</div>
</div>
<div class="slide next">
<div class="image" style="background-image: url('http://imageshack.com/a/img922/6240/GzBaZq.jpg');">
<div class="content">
Slide 2
</div>
<div class="spanner"></div>
</div>
</div>
<div class="slide prev">
<div class="image" style="background-image: url('http://imageshack.com/a/img924/227/XRZGsI.jpg');">
<div class="content">
Slide 3
</div>
<div class="spanner"></div>
</div>
</div>
</div>Вот JSFiddle всего приведенного выше кода: https://jsfiddle.net/795f88nm/
Как вы увидите, карусель работает нормально. Мне просто нужно добавить анимацию следующим образом:
- При нажатии на следующий слайд (нижний правый угол) он должен постепенно открывать слайд вверх. «Новый» следующий слайд должен постепенно появляться из нижнего угла.
- При нажатии на предыдущий слайд (верхний левый угол) он должен постепенно открывать слайд вниз. «Новый» предыдущий слайд должен постепенно появляться из верхнего угла.
Я не очень хорошо делаю анимацию, поэтому мог бы помочь с этим.
