Как выровнять по центру slick-слайдер, centerMode

Question

Для слайдера slick поставил свойство centerMode: true чтобы выровнять слайды по центру экрана.
Но проблема в том, что если слайдов больше чем указано в свойстве slidesToShow: 4, то слайды не выравниваются по центру, а начинают выстраиваться начиная от центра экрана. т.е. расположение всех слайдов нужно выровнять горизонтально, чтобы они были распределены по всему экрану.
Сейчас если slidesToShow: 4 и слайдов больше 4, то так:

должно быть так:
Как выровнять слайды по центру и как равномерно распределить слайды по экрану?

https://jsfiddle.net/ab6c759f/

$('ul').slick({
        infinite: false,
        speed: 300,
        arrows: false,
        dots:false,
        centerMode: true,
        slidesToShow: 4,
        slidesToScroll: 1,
        responsive: [
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    });

body{
    padding: 0;
    margin: 0;
}
.wrap{
    padding: 20px;
}
.slider{
    padding: 0;
    width: 100%;
}
.slide{
    border:1px solid #000;
    max-width: 300px;
}
.content{
    height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>

<div class="wrap">
    <ul class="slider">
        <li class="slide">
            <div class="title">title1</div>
            <div class="content">content1</div>
        </li>
        <li class="slide">
            <div class="title">title2</div>
            <div class="content">content2</div>
        </li>
        <li class="slide">
            <div class="title">title3</div>
            <div class="content">content3</div>
        </li>
        <li class="slide">
            <div class="title">title3</div>
            <div class="content">content3</div>
        </li>
        <li class="slide">
            <div class="title">title3</div>
            <div class="content">content3</div>
        </li>
    </ul>
</div>

БЛОГ НА HUSL

Как выровнять по центру slick-слайдер, centerMode

Ответы (0 шт):