【问题标题】：Slick.js carousel too much space and sliding issueSlick.js 轮播太多空间和滑动问题
【发布时间】：2020-01-09 20:15:08
【问题描述】：

我正在使用 slick.js https://kenwheeler.github.io/slick/ 。问题是我正在尝试滑动包含行的滑动卡 (".carosalItemHash") 。每行包含卡片，它应该与之前的卡片相邻，避免过多的空白空间。轻按一下箭头，幻灯片应使每张卡片都可见。

我正在尝试使用 slick.js 在 2 行中显示两个显示元素，以便它应该水平滑动。

1) 不应该有空格。空格必须用旁边的另一张卡片填充。 2) 一行中的每张卡片应该一张一张地滑动，这样每一张卡片的文字在一张一张地滑动时是完全可见的。

.html

    <div class="skillsCntr uttPanel">\
                <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
                <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
     <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
     <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
     <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
            </div>\


js
=========


const slider = $(".skillsCntr.utterancePanel");
                    slider
                        .slick({
                            arrows: true,
                            infinite: true,
                            slidesPerRow: 1,
                            rows: 2,
                            slidesToShow: 4,
                            slidesToScroll: 1,
                            dots: false,
                            autoplay: false,
                            // speed: 300,
                            variableWidth: true,
                            centerMode: true,
                            adaptiveHeight: false,
                            centerPadding: '0%'
                        });
                    //Implementing navigation of slides using mouse scroll
                    slider.on('wheel', (function (e) {
                        e.preventDefault();



             if (e.originalEvent.deltaY < 0) {
                                $(this).slick('slickNext');
                            } else {
                                $(this).slick('slickPrev');
                            }
                        }));
                    }

<head>
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.6.0/slick/slick.css" />
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.6.0/slick/slick-theme.css" />
</head>
<body>
  <div class="skillsCntr uttPanel">\
                <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
                <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
     <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
     <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
     <div class="carosalItemHash" style="border-bottom: 0px;">\
                    <span title="">cqqcc</span>
                </div>
            </div>\
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.6.0/slick/slick.min.js"></script>
</body>

【问题讨论】：

你试过centerPadding: 0吗？没有字符串，没有额外内容，只有数字零
是的，但是每行中两个文本之间的空间太大，并且在滑动时它会向左或向右滑动，中间跳过 3 到 4 张卡片，因此无法查看幻灯片上的每个文本。
去掉slidesToShow选项，使用centerMode你只显示1。两个文本之间的空间不应该与Slick Slider相关，你只需要一些CSS来为那些设置margin: 0;跨度或它们是什么

标签： javascript slick.js

【解决方案1】：

我不确定我是否已完成所有请求的更改，但我创建了一个简单的版本，每张幻灯片有两行，行与行之间没有间距。一次显示一张两行幻灯片。

设置如下：

$(".uttPanel").slick({
    arrows: true,
    infinite: true,
    slidesPerRow: 1,
    rows: 2,
    dots: false,
    autoplay: false,
);

这里有一个带有最少 JS 和 CSS 的代码笔：https://codepen.io/edlucas/pen/PowRyRe

我希望这会有所帮助。

【讨论】：

Slick 似乎对 centerMode 和多行有问题。
每行有很多空间，每行中的文本不是连续的，即其他文本应该紧跟在前面的文本之后，它们之间的空间很小，两行。在刷卡时，文本应该是可见和可读的。
是的，这就是 centerMode 似乎不适用于两行的问题。