Как сделать подобный слайдер на slick?

Question

[godsplan]

https://derevopark.com/
Слайдер внизу
Проблема именно с расположение первого и второго слайда, у второго слайда видна только половина и при прокрутке он должен увеличиваться а следующий слайд уменьшаться и подтягиваться к нему.Я пробовал разные варианты с scale и transform-origin, но у меня дерганая анимация либо не синхронизированная.
Помогите плз уже который час долблюсь.

https://codepen.io/poylar/pen/YzGvZEX
Это мои попытки

Comments

[iBird Rose]

не понятно по скрину как нужно, но не легче сделать 2 слайдера и привязать их?

[godsplan]

iBird Rose, я приложил свою работу, по ней я думаю понятно что у меня не получается

Answer 1

[Сергей delphinpro]

Убрать всю эту фигню в js со стилями.
Всем слайдам идущим после активного задать трансформацию (scale < 1) и переходы.
Активному (первому из активных, т.к. активных там вероятно будет два) - транcформацию scale = 1
Всё это можно в css прописать, без использования событий слайдера.

Вот, проиллюстрировал основную идею: https://codepen.io/delphinpro/pen/ExgRENX

Comments

[godsplan]

Спасибо!Но у вас та же прблема что и у меня. При прокрутке полного цикла слайдера анимацая на первый не срабатывает

[Сергей delphinpro]

godsplane, она и не будет работать в этом слайдере из-за особенностей реализации.
Если это так принципиально, нужно искать другие решения или пилить своё.

[godsplan]

Сергей delphinpro, фигово, а в чем именно проблема реализации не знаете?

[Сергей delphinpro]

godsplane, клонированные слайды.
https://codepen.io/delphinpro/pen/ExgRENX?editors=0110
Я их пометил фоном.
В принципе, я посмотрел. Возможно есть варианты. Попробуйте разобраться, когда этим клонам следует применять трансформации. Может, все-таки придется использовать события.

[godsplan]

Сергей delphinpro, Я не понимаю как клону применить анимацию если как я понял он просто изчезает и подменяет собой основной слайд, а анимации свойства display нельзя же сделать

Answer 2

[inkShio]

codepen.io что то типо того, только спозиционировать стрелки и пагинацию.

Comments

[dmitry-toster]

ну и для.slick-slide h3 добавить transition .5s для плавности)

[godsplan]

Похожее, Но это не то здесь логика совсем другая.
Вот сайтт где этот слайдер https://www.le-park.com/

[inkShio]

godsplane, ну так здесь еще проще, делаешь 2 слайдера связываешь их (asNavFor, asNavFor), слева выводишь пагинацию, справа слайды. Ну или делаешь пагинацию и стрелки вешаешь методы (slickNext, slickPrev и т.д.), а справа опять слайды. le-park.com тоже использует слик, зайди в код и посмотри.

[godsplan]

inkShio, пардон не то скинул
сайт вот https://derevopark.com/ внизу слайдер