Используйте slick или owl. Сделайте слайд по центру (в настройках init слайдера). Остальным слайдам добавьте при загрузке классы. Например вот так:
function slide_change_position() {
var first_left_slide = $('.active-slider').prev('.slide-class');
var second_left_slide = $(first_left_slide).prev('.slide-class');
var third_left_slide = $(second_left_slide).prev('.slide-class');
var first_right_slide = $('.active-slider').next('.slide-class');
var second_right_slide = $(first_left_slide).next('.slide-class');
var third_right_slide = $(second_left_slide).next('.slide-class');
$(first_left_slide, first_right_slide).addClass('slide-change-position-1');
$(second_left_slide, second_right_slide).addClass('slide-change-position-2');
$(third_left_slide, third_right_slide).addClass('slide-change-position-3');
}
slide_change_position();
Изменить позицию
.slide-class {
transition: 0.5s;
}
.slide-change-position-1 {
margin-top: 100px;
}
.slide-change-position-2 {
margin-top: 200px
}
.slide-change-position-3 {
margin-top: 300px;
}
При переключении слайда вызвать ещё раз функцию. Она снова найдёт первый, второй, третий слайд относительно главного и сменит позицию.
$('.slider-class').on('afterChange', function(event, slick) {
slide_change_position();
});
Но позиция наверно сменится только тогда, когда слайд полностью переключится. Чтобы позиция менялась сразу же после клика на стрелочку (плавно передвигалась), можно попробовать использовать setInterval() с условием, что каждый раз вычитать из текущего margin-top 1px до нужного и задать определённый интервал. Тогда слайд плавно перейдёт на новую позицию.
Это всего лишь пример и возможно он плохой, но я просто рассказал.
