Here are what going to happen. If the condition is (slideCount <=2 ) the slide items should be at the center of the container, but right now they are align to the right(run the code snippet below). I'm not sure if its possible using css or slick events/settings to dynamically count the items. I want it to be centered if the (slideCount <=2 ) like this.

Notes that it is working if the slick-slide item is only one.

Below are my codes:

$(function() {
    $('.js-addons-builder-slick').each(function() {
        let slider = $(this);
        let slideCount = slider.children('.items').length; // Count the number of slides

        let slickOptions = {
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: false,
            dots: true,
            infinite: false,
            arrows: true,
            centerPadding: '0px',
            variableWidth: true,
            touchThreshold: 100,
            rows: 0,
            responsive: [{
                breakpoint: 768,
                settings: {
                    draggable: true,
                    variableWidth: true,
                    dots: true,
                    arrows: true,
                    infinite: false,
                }
            }]
        };

        // Conditional settings based on slide count
        if (slideCount <=2 ) {
            slickOptions.centerMode = true;
        } else {
            slickOptions.centerMode = false;
        }

        slider.slick(slickOptions);
    });
});

    .mycontainer {
        max-width: 1400px;
        margin: auto;
        background: orange;
        padding: 10px 0;
    }
    .items {
        width: 340px;
        margin: 0 10px;
        text-align: center;
        border: 1px solid black;
        padding: 20px;
        box-sizing: border-box;
    }
    .slick-prev:before, .slick-next:before {
        color: black;
    }

<link href="/[email protected]/slick/slick.css" rel="stylesheet"/>
<link href="/[email protected]/slick/slick-theme.css" rel="stylesheet"/>
<script src=".6.0.min.js"></script>
<script src="/[email protected]/slick/slick.min.js"></script>

<div class="mycontainer">
    <div class="js-addons-builder-slick page-slick-flex">
        <div class="items">Slide 1</div>
        <div class="items">Slide 2</div>
    </div>

    <div class="js-addons-builder-slick page-slick-flex">
        <div class="items">Slide 1</div>
    </div>
</div>