Прежде всего, сравнивая ваши CSS классы с гладкими. js документация, я понял, что:
Здесь , вы видите, что Слик. js Карусель режима центра устанавливает центральный слайд как текущий слайд
Теперь в вашем CodePen (который я тестировал в локальном файле), ваш смещение было смещено влево (текущим был первый слайд, показанный слева от карусели ... не по центру для центрированного режима).
Что это сделало для меня:
1. Сначала я вставил JS код из Slick. js Center Mode как есть .
Почему? Для правильного поведения и получения чистого кода.
Ваш JS был настроен и, например, centerMode: true удален из основной части кода.
2. Нарисуйте визуальное представление того, что вы хотите, чтобы указать, что редактировать (CSS, JS?)
Здесь Я нарисовал, какого рода визуального представления, которое вы должны иметь в голове, прежде чем приступить к работе над графической настройкой
Лучший способ создать градиент при скике. js загружает его классы после загрузки документа, это помещать градиент ПОД предстоящее содержание.
Поэтому я добавил эти jQuery insertBefore и insertBefore , чтобы обернуть ползунок
$( "<div style='height:100%;width:100%;background-image: linear-gradient(to right, #000000, #2e2e2e, #585858, #878787, #b9b9b9, #b9b9b9, #b9b9b9, #b9b9b9, #878787, #585858, #2e2e2e, #000000);position:absolute;'>" ).insertBefore( "div.slick-slider" );
$( "</div>" ).insertAfter( "div.slick-slider" );
Редактировать 1: Который является Div наложения, в основном. Я мог бы добавить функцию обтекания jQuery tho
3. После этого настраиваем slick-slide и slick-center класс
.slick-slide {
opacity: .4;
}
.slick-center {
display: block;
max-width: 10% !important;
max-height:20% !important;
opacity: 1;
Непрозрачность устанавливается для того, чтобы отображался градиент ниже
Найдено здесь: { ссылка }
4. Наконец, вот рабочее решение на CodePen