Как сделать 3 связанных слайдера с таким эффектом?

Question

[voyager-studio]

Всем привет! Необходимо сделать такой же слайдер как на этом сайте в блоке "Команда".

Вижу 3 связанных слайдера, возможно реализовать с помощью Slick Slider с точно таким эффектом пролистывания?

Может быть есть похожий пример. Заранее благодарен за ответ!

Comments

[Антон Литвиненко]

нет там трех связанных слайдеров, там один самописный

Answer 1

[Виталий Першин]

Comments

[Максим]

я прошу прощения, я просто не знаю, а как перебить css от slick своими ?

[Виталий Першин]

Максим Ленский, Скопировать селектор и переопределить, но лучше этого не делать, а помещать свои блоки внутрь слайдов и их уже стилизовать как угодно.

[Максим]

Виталий, а вы реально можете показть как это делать ? я вот могу ...но только нету куда скидывать проект

[Виталий Першин]

Максим Ленский, Не очень понимаю что именно показать, вы вроде и сами не плохо разбираетесь. Если менять родные стили слик, то большая вероятность что он сломается, разве что дополнять своими.

Answer 2

[FoxSay]

Попробуй с owl-carousel сделать:
1) Создай 3 слайдера.
2) Задай два обработчика события для двух кнопок которые бы пролистывали сразу 3 слайдера
к примеру

let owl1 = $('.owl-carousel-1').owlCarousel();
let owl2 = $('.owl-carousel-2').owlCarousel();
let owl3 = $('.owl-carousel-3').owlCarousel();
$('.customNextBtn').click(function() {
    owl1.trigger('next.owl.carousel');
    owl2.trigger('next.owl.carousel');
    owl3.trigger('next.owl.carousel');
})
$('.customPrevBtn').click(function() {
    owl1.trigger('prev.owl.carousel');
    owl2.trigger('prev.owl.carousel');
    owl3.trigger('prev.owl.carousel');
})

Answer 3

[Rerurk]

Comments

[Rerurk]

,без карусели