如何使我的SlickJS Carousal在3张图像之间循环，并在循环时将它们全部可见？

Question

I am using SlickJS to build a slider that will allow me to cycle between images.

Similar to this image

Link to SlickJS Documentation

There area a couple of problems that I am running into.

The first is that, as far as I know, you cannot cycle between images if you are showing them all at once. For example if you set slidesToShow to 3 and you have only 3 images, you cannot cycle through them.

The other problem I have is that even when assigning custom buttons and running the slickNext and slickPrev functions through them, it still does not cycle.

Could anyone provide me guidance on how to get the slider to function similar to the image I provided above?

Here is the code I have:

 <div>
    <button class="left-selector" style="height: 20px; width: 20px">
    </button>
    <div class="center-ag-slider">
        <div>
            <img style="max-width:100%; max-height:100%;" src="https://keystonepuppies.com/wp-content/uploads/2012/11/Siberian-Husky-Category-950x700.jpg">
        </div>
        <div>
            <img style="max-width:100%; max-height:100%;" src="https://dgicdplf3pvka.cloudfront.net/2355971/siberian-husky-puppy-picture-473f7308-f278-4858-b1ec-81368845e1be.jpg">
        </div>
        <div>
            <img style="max-width:100%; max-height:100%;" src="https://i.ebayimg.com/00/s/NzUzWDEwMjQ=/z/bCwAAOSwTM5YtzZy/%24_86.JPG">
        </div>

    </div>
    <button class="right-selector" style="height: 20px; width: 20px">
    </button>
</div>

<script type="text/javascript">

        $(document).ready(function () {

            $('.center-ag-slider').slick({
                centerMode: true,
                centerPadding: '60px',
                slidesToShow: 3,
                initialSlide: 0,
                responsive: [
                    {
                        breakpoint: 768,
                        settings: {
                            arrows: false,
                            centerMode: true,
                            centerPadding: '40px',
                            slidesToShow: 3
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            arrows: false,
                            centerMode: true,
                            centerPadding: '40px',
                            slidesToShow: 1
                        }
                    }
                ]
            });

            $('.left-selector').click(function () {
                $(".center-ag-slider").slick("slickPrev");
            });
            $('.right-selector').click(function () {
                $(".center-ag-slider").slick("slickNext");
            });

        });
    </script>

Answer 1

You can set a width on the slick-slide class in css that will display them all on the page simultaneously. So, in this case because there are 3 images you are trying to slide through you would set the width on slick-slide to be 33.333333%;

.slick-slide {
  width: 33.333333%;
}