Почему slick slider ставит большее количество активных слайдов, чем указано?

Question

[GreenMan1899]

в slidesToShow указываю значение 2, однако он добавляет класс slick-active на один блок больше

<div class="slick-slider-portfolio">
                <div class="slick-slide">
                    <img class="system-item_img" src="{{ STATIC_URL }}img/img-sample-1.jpg" alt="Экономьте деньги">
                </div>
                <div class="slick-slide">
                    <img class="system-item_img" src="{{ STATIC_URL }}img/img-sample-2.jpg" alt="Экономьте деньги">
                </div>
                <div class="slick-slide">
                    <img class="system-item_img" src="{{ STATIC_URL }}img/img-sample-3.jpg" alt="Экономьте деньги">
                </div>
                <div class="slick-slide">
                    <img class="system-item_img" src="{{ STATIC_URL }}img/img-sample-1.jpg" alt="Экономьте деньги">
                </div>
                <div class="slick-slide">
                    <img class="system-item_img" src="{{ STATIC_URL }}img/img-sample-2.jpg" alt="Экономьте деньги">
                </div>
                <div class="slick-slide">
                    <img class="system-item_img" src="{{ STATIC_URL }}img/img-sample-3.jpg" alt="Экономьте деньги">
                </div>
            </div>

.fp-portfolio {
    overflow: hidden;
    padding: 50px 0;
}

.slick-slider-portfolio {
}

.slick-slider-portfolio .slick-slide {
    width: 100%;
    height: auto;
    cursor: pointer;
    padding: 10px;
    text-align: center;
    border: none;
    outline: none;
}

.slick-slider-portfolio .slick-slide img {
    width: 100%;
    height: 250px;
}

.slick-slider-portfolio .slick-slide:not(.slick-active) {
    opacity: 0.5;
}

$('.slick-slider-portfolio').slick({
            centerMode: true,
            slidesToShow: 2,
            centerPadding: '110px',
            /*autoplay: true,*/
          });

в итоге получается так (сорян)

<div class="slick-slider-portfolio slick-initialized slick-slider"><button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;">Previous</button>
                <div aria-live="polite" class="slick-list draggable" style="padding: 0px 110px;"><div class="slick-track" style="opacity: 1; width: 5916px; transform: translate3d(-2958px, 0px, 0px);" role="listbox"><div class="slick-slide slick-cloned" data-slick-index="-3" aria-hidden="true" style="width: 493px;" tabindex="-1">
                    <img class="system-item_img" src="/static/img/img-sample-1.jpg" alt="Экономьте деньги">
                </div><div class="slick-slide slick-cloned" data-slick-index="-2" aria-hidden="true" style="width: 493px;" tabindex="-1">
                    <img class="system-item_img" src="/static/img/img-sample-2.jpg" alt="Экономьте деньги">
                </div><div class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" style="width: 493px;" tabindex="-1">
                    <img class="system-item_img" src="/static/img/img-sample-3.jpg" alt="Экономьте деньги">
                </div><div class="slick-slide" data-slick-index="0" aria-hidden="true" style="width: 493px;" tabindex="-1" role="option" aria-describedby="slick-slide00">
                    <img class="system-item_img" src="/static/img/img-sample-1.jpg" alt="Экономьте деньги">
                </div><div class="slick-slide" data-slick-index="1" aria-hidden="true" style="width: 493px;" tabindex="-1" role="option" aria-describedby="slick-slide01">
                    <img class="system-item_img" src="/static/img/img-sample-2.jpg" alt="Экономьте деньги">
                </div><div class="slick-slide" data-slick-index="2" aria-hidden="true" style="width: 493px;" tabindex="-1" role="option" aria-describedby="slick-slide02">
                    <img class="system-item_img" src="/static/img/img-sample-3.jpg" alt="Экономьте деньги">
                </div><div class="slick-slide slick-active" data-slick-index="3" aria-hidden="false" style="width: 493px;" tabindex="-1" role="option" aria-describedby="slick-slide03">
                    <img class="system-item_img" src="/static/img/img-sample-1.jpg" alt="Экономьте деньги">
                </div><div class="slick-slide slick-current slick-active slick-center" data-slick-index="4" aria-hidden="false" style="width: 493px;" tabindex="-1" role="option" aria-describedby="slick-slide04">
                    <img class="system-item_img" src="/static/img/img-sample-2.jpg" alt="Экономьте деньги">
                </div><div class="slick-slide slick-active" data-slick-index="5" aria-hidden="false" style="width: 493px;" tabindex="-1" role="option" aria-describedby="slick-slide05">
                    <img class="system-item_img" src="/static/img/img-sample-3.jpg" alt="Экономьте деньги">
                </div><div class="slick-slide slick-cloned" data-slick-index="6" aria-hidden="true" style="width: 493px;" tabindex="-1">
                    <img class="system-item_img" src="/static/img/img-sample-1.jpg" alt="Экономьте деньги">
                </div><div class="slick-slide slick-cloned" data-slick-index="7" aria-hidden="true" style="width: 493px;" tabindex="-1">
                    <img class="system-item_img" src="/static/img/img-sample-2.jpg" alt="Экономьте деньги">
                </div><div class="slick-slide slick-cloned" data-slick-index="8" aria-hidden="true" style="width: 493px;" tabindex="-1">
                    <img class="system-item_img" src="/static/img/img-sample-3.jpg" alt="Экономьте деньги">
                </div></div></div>
                
                
                
                
                
            <button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;">Next</button></div>

Answer 1

[sincopa]

Скорей всего и за centerPadding: '110px',

Comments

[GreenMan1899]

убрал - все равно

[sincopa]

centerMode: true, еще убери

Answer 2

[Serj-One]

Всё верно, вы же сами указываете, показ двух слайдов с центрированием. Это 3 активных слайда.

Comments

[GreenMan1899]

если я это уберу, то пропадет показ неактивных слайдов по бокам.
мне надо чтобы было как на этом рисунке
Какой плагин подойдет для такого слайдера?

[GreenMan1899]

заметил что такое происходит только с четными количеством слайдов
если прописать 3 или 5 то все ок

[Serj-One]

GreenMan1899: Заметить, что расположить блоки таким образом, чтоб один был по центру, можно только при нечётном количестве... Удивительная внимательность)

Вам уже дал правильный ответ товарищ Евгений Вольф, для стилизации присваивайте класс крайним блокам через callback-функцию. Если нужно, чтоб крайние уходили за края, делайте слайдер шире контейнера и скрывайте бока через overflow: hidden.

[GreenMan1899]

Serj-One: она и не нужна. Убираю центрирование. Убираю overflow: hidden у контейнера.