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

Question

[romankushnarov]

Подскажите, пожалуйста, как настроить подобный слайдер. При скролле слайдера первый элемент должен сместиться левее и выглядеть так, как на скрине выглядит последний. Сам блок обернут в контейнер max-width: 1920px, так что вылезать за пределы не будет.

Answer 1

[Алексей Николаев]

.slick-slide:not(.slick-active){
    opacity: 0.7;
}

Comments

[romankushnarov]

Дело не в прозрачности, а в смещении слайдов, вчитайтесь в задание, пожалуйста

[Алексей Николаев]

В чем вопрос то? Как запустить slik-slider?

$('.items').slick({
  slidesToShow: 4,
  slidesToScroll: 1
});

[romankushnarov]

Алексей Николаев, присмотритесь, первый элемент находится не у края контейнера изначально. А при навигации по след слайдам, первый должен сдвинуться влево, к краю контейнера

[Алексей Николаев]

.slick-track {
    padding-left: 100px;
}

$('.items').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  infinite: false,
});

[romankushnarov]

Алексей Николаев, но ведь при паддинге сползет весь слайдер, то есть при навигации по слайдеру первый элемент будет всегда с большим отступом от края контейнера. А нужно сделать так, чтоб первый и последний элемент были с отступом когда они с классом slick-active, причем играться с классом slick-active нет смысла.

[Алексей Николаев]

не .slick-list, а .slick-track попробуйте добавить отступ слева.