Как исправить гладкий centerMode, если слайдыToShow меньше, чем гладкие элементы ⇐ Jquery

[Anonymous]

Если элементов больше 6, centerMode работает нормально, но если элементов меньше 6, слайды центрируются неправильно.
Я пытаюсь чтобы реализовать функциональность JS, которая, если количество элементов слайда в html меньше 6, centerMode все равно будет работать или отключено.
Я пытаюсь чтобы следовать этому примеру, но я не могу повторить, потому что исходный сайт не найден:
Центральный режим слайдера не работает, когда слайдов больше, чем переменная слайдшоу
Проверьте мой код ниже, и вы также можете проверьте код здесь:
https://codepen.io/graydirt/full/vYMxpQE

Код: Выделить всё

$(function() {

$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});

// Set preferred slidesToShow
var slidesToShow = 5;
var childElements = $('.slider-nav').children().length;
// Check if we can fulfill the preferred slidesToShow
if( slidesToShow > (childElements-1) ) {
// Otherwise, make slidesToShow the number of slides - 1
// Has to be -1 otherwise there is nothing to scroll for - all the slides would already be visible
slidesToShow = (childElements-1);
}

$('.slider-nav').slick({
slidesToShow: slidesToShow,
/*slidesToShow: 5,*/
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
centerMode: true,
centerPadding: '70px',
focusOnSelect: true,
variableWidth: false,
rows: 0,
responsive: [
{
breakpoint: 992,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 576,
settings: {
slidesToShow: 1,
}
}
]
});

});

Код: Выделить всё

img {
max-width: 100%;
height: auto;
}

.slider-style-for {
& img {
width: 100%;
}
}

.slider-style-nav {
& .slider-nav__items {
width: 260px;
}
& .slick-next {
right: 0;
}
& .slick-prev {
left: 0;
}
& .slick-next:before,
&  .slick-prev:before {
color: black;
}
}

div[aria-hidden="true"] img {
opacity: .3;
}

Код: Выделить всё

[img]https://swiperjs.com/demos/images/nature-1.jpg[/img]

[img]https://swiperjs.com/demos/images/nature-2.jpg[/img]

[img]https://swiperjs.com/demos/images/nature-3.jpg[/img]

[img]https://swiperjs.com/demos/images/nature-4.jpg[/img]

[img]https://swiperjs.com/demos/images/nature-5.jpg[/img]




[img]https://swiperjs.com/demos/images/nature-1.jpg[/img]

[img]https://swiperjs.com/demos/images/nature-2.jpg[/img]

[img]https://swiperjs.com/demos/images/nature-3.jpg[/img]

[img]https://swiperjs.com/demos/images/nature-4.jpg[/img]

[img]https://swiperjs.com/demos/images/nature-5.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/784 ... lick-items