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

Question

我正在使用SlickJS构建一个滑块，使我可以在图像之间循环。

与此图像相似

链接到SlickJS文档

我遇到了一些问题。

首先，据我所知，如果一次显示所有图像，则无法在图像之间循环。 例如，如果将slidesToShow设置为3，而只有3张图像，则无法循环浏览它们。

我的另一个问题是，即使分配自定义按钮并通过它们运行slickNext和slickPrev函数，它仍然不会循环。

谁能为我提供有关如何使滑块发挥与以上提供的图像相似功能的指导？

这是我的代码：

 <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

您可以在css中的slick-slide类上设置宽度，以同时在页面上全部显示它们。 所以，在这种情况下，因为有你试图通过滑动你会设置宽度3的图像， slick-slide是33.333333％;

.slick-slide {
  width: 33.333333%;
}