Как задать разную ширину для слайдов в слайдере slick?

Question

[gretyl007]

Собственно, сам вопрос в названии темы. Как сделать центральный слайд самым большим, слайды справа и слева меньше?

Answer 1

[y0u]

JS:

$('.slider').slick({
    centerMode: true
});

CSS:

.slick-current {
    transform: scale(1.3);
}

Comments

[gretyl007]

А если слайдов 5? И у 1 и 5 одна ширина, у 2 и 4 другая, а у 3 третья?

[y0u]

gretyl007, это уже похоже на задание, а не на вопрос. На главный вопрос тебе ответили. Дальше можешь легко разобраться самостоятельно. У Slick полно примеров есть.

[gretyl007]

y0u, классы для активных слайдов не видит слик.

Answer 2

[inkShio]

на сайте есть пример с center mode.

как вариант еще увеличивать содержание текущего контейнера.

<div class="slick-slide"><div class="container-content">слайд 1</div></div>
<div class="slick-slide slick-current"><div class="container-content">слайд 2</div></div>
<div class="slick-slide"><div class="container-content">слайд 3</div></div>

в css

.slick-current > .container-content {
  transform: scale(2);
}

Comments

[gretyl007]

А если слайдов 5? И у 1 и 5 одна ширина, у 2 и 4 другая, а у 3 третья?

[inkShio]

если у тебя такого типа слайдер можешь так

.slick-active > .container-content {
  transform: scale(1.5);
}

.slick-current > .container-content {
  transform: scale(2);
}

или гугли как соседним слайдам, текущего слайда, добавить дополнительный класс как пример