Как реализовать подобный круговой слайдер?

Я обычно использую slickslider или owlslider. Подскажите, в какую сторону смотреть чтобы реализовать подобную навигацию? 5ca0763f04cd6561448798.jpeg
  • Вопрос задан
  • 782 просмотра
Пригласить эксперта
Ответы на вопрос 1
@OneTwoThreeFourFive
Используйте 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 до нужного и задать определённый интервал. Тогда слайд плавно перейдёт на новую позицию.

Это всего лишь пример и возможно он плохой, но я просто рассказал.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы