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

Question

[ravlex]

Я обычно использую slickslider или owlslider. Подскажите, в какую сторону смотреть чтобы реализовать подобную навигацию?

Comments

[FOcuswOwX]

А что вас не устраивает в owl-carousel?

[ravlex]

FOcuswOwX, именно изогнутость не пойму как сделать. Чтобы полукругом шли

[FOcuswOwX]

ravlex, написать опцию на инит и смену слайдов, чтобы она проставляла для активных классы leftFirst leftSecond ... rightFirst rightSecond.... (или другие) и прописать margin-top разный

[Lord_Dantes]

Ну посмотрите как сгибаются блоки, и согните блок с слайдером :D

Answer 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 до нужного и задать определённый интервал. Тогда слайд плавно перейдёт на новую позицию.

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

Comments

[profesor08]

И получится хрень, потому что при сдвиге элементы будут двигаться по прямой к новой позиции, а не по окружности. Сменой классов это в принципе не реализовать, надо двигать элементы на js.