javascript - On Slick Carousel how to center the slick-slide items if its less than three? - Stack Overflow

admin管理员组

文章数量:1343856

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>

本文标签： javascriptOn Slick Carousel how to center the slickslide items if its less than threeStack Overflow