Как в slick-slider правильно изменять размеры боковых слайдов, чтобы не ломался слайдер?

Question

[Overlord934]

Да, друзья. Снова он и снова я. Никак не могу победить этот слайдер. Подскажите, может есть какие-то советы как правильно кастомизировать слайдеры под себя? Нужно настроить слайдер так, чтоб у центрального слайда была ширина и высота отличающаяся от слайдов по бокам. А потом нужно их раскинуть как на фото. Как такое можно сделать? Настраивать теневые классы слика или изменять стили блоков в css? Буду рад любой помощи. Вот ссылка на кодпен -

Comments

[Ankhena]

Открываете инструменты разработчика.
Смотрите какой класс у центрального слайда.
Применяете к нему, что хочется.

Answer 1

[Sagrana]

У slick slider же есть режим «Center Mode». Это прям ваш пример, только там выводится по три сайда, а вам нужно 1. У центрального слайда класс slick-center, на него настраивайте сдвиг по оси и увеличение.

Comments

[Overlord934]

Но если выводить 1 слайд - не будет видно боковых. Нужно чтоб боковые слайды как бы выглядывали

[Sagrana]

Overlord934, там же в примере как раз торчат по бокам слайды. Три показываются полностью, а два — частично.

[Overlord934]

Sagrana, вот код https://codepen.io/Loremord/pen/eYQMbJm. Посмотрите как это отображается, у меня они не выглядывают.

[Sagrana]

Overlord934, вам надо подобрать значение centerPadding.
Я поставила для примера 20vw, и боковые слайды появились
https://codepen.io/sagrana/pen/ZEmoVeg

[Overlord934]

Sagrana, Надо же. Спасибо!

[Overlord934]

Sagrana, Расскажите ваш секрет, как вы до этого догадались? Я начинающий верстальщик поэтому интересен ваш ход мыслей при решении такой проблемы. Мучался с этой проблемой без преувеличения 4 дня.

[Sagrana]

Overlord934, на самом деле тут нет никакого секрета, такие вещи реально прихотят с опытом. Когда делаешь тридцатый слайдер, гораздо больше понимаешь, что происходит.
Очень помогает внимательное изучение документации. Это приводит к пониманию, за что отвечает каждая опция в настройках плагина. А там уже начинаются эксперименты по подбору значений, подходящих для конкретного случая.

[Overlord934]

Sagrana, Понял, благодарю за ответ)