Как в slick-slider правильно изменять размеры боковых слайдов, чтобы не ломался слайдер?
Да, друзья. Снова он и снова я. Никак не могу победить этот слайдер. Подскажите, может есть какие-то советы как правильно кастомизировать слайдеры под себя? Нужно настроить слайдер так, чтоб у центрального слайда была ширина и высота отличающаяся от слайдов по бокам. А потом нужно их раскинуть как на фото. Как такое можно сделать? Настраивать теневые классы слика или изменять стили блоков в css? Буду рад любой помощи. Вот ссылка на кодпен - snippet
Дополнительно:
Открываете инструменты разработчика.
Смотрите какой класс у центрального слайда.
Применяете к нему, что хочется.
Ответы:
У slick slider же есть режим «Center Mode». Это прям ваш пример, только там выводится по три сайда, а вам нужно 1. У центрального слайда класс slick-center, на него настраивайте сдвиг по оси и увеличение.
- Но если выводить 1 слайд - не будет видно боковых. Нужно чтоб боковые слайды как бы выглядывали
- Overlord934, там же в примере как раз торчат по бокам слайды. Три показываются полностью, а два — частично.
- Sagrana, вот код https://codepen.io/Loremord/pen/eYQMbJm. Посмотрите как это отображается, у меня они не выглядывают.
- Overlord934, вам надо подобрать значение centerPadding.
Я поставила для примера 20vw, и боковые слайды появились
https://codepen.io/sagrana/pen/ZEmoVeg - Sagrana, Надо же. Спасибо!
- Sagrana, Расскажите ваш секрет, как вы до этого догадались? Я начинающий верстальщик поэтому интересен ваш ход мыслей при решении такой проблемы. Мучался с этой проблемой без преувеличения 4 дня.
- Overlord934, на самом деле тут нет никакого секрета, такие вещи реально прихотят с опытом. Когда делаешь тридцатый слайдер, гораздо больше понимаешь, что происходит.
Очень помогает внимательное изучение документации. Это приводит к пониманию, за что отвечает каждая опция в настройках плагина. А там уже начинаются эксперименты по подбору значений, подходящих для конкретного случая. - Sagrana, Понял, благодарю за ответ)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для изменения размеров боковых слайдов в slick-slider без ломания слайдера, вам необходимо правильно настроить параметры слайдера и стили CSS.
Во-первых, убедитесь, что у вас правильно настроены параметры слайдера. Возможно, вам потребуется использовать параметр "centerMode" и "centerPadding", чтобы центрировать слайды и обеспечить правильное отображение боковых слайдов.
Пример настройки параметров слайдера:
$('.your-slider').slick({ centerMode: true, centerPadding: '50px', slidesToShow: 3, responsive: [ { breakpoint: 768, settings: { slidesToShow: 1 } } ] });
Далее, вам нужно правильно настроить стили CSS для боковых слайдов. Убедитесь, что у боковых слайдов заданы правильные размеры и отступы, чтобы они корректно отображались рядом с центральным слайдом.
Пример стилей CSS для боковых слайдов:
.slick-slide { margin: 0 10px; /* отступ между слайдами */ } .slick-slide img { width: 100%; /* ширина изображения */ height: auto; /* автоматическая высота */ }
При корректной настройке параметров слайдера и стилей CSS, вы сможете изменять размеры боковых слайдов в slick-slider без ломания слайдера. Не забывайте тестировать изменения на различных устройствах и экранах, чтобы убедиться, что слайдер отображается правильно.