光滑的滑块显示堆叠的幻灯片答案

【问题标题】：slick slider to show stacked slides光滑的滑块显示堆叠的幻灯片
【发布时间】：2019-01-24 07:07:08
【问题描述】：

我已经实现了光滑的滑块并且工作得很好，但是它将所有幻灯片显示在 1 条水平线上。例如，我有 25-30 张幻灯片。目前我已经设置了 5 张幻灯片一次显示。如果我将它增加到 15，它会缩小幻灯片但保持在 1 条水平线上。我想要的是每行 3 行包含 5 个项目。意思是第一张幻灯片包含 3 行中的 15 个项目（每行 5 个），下一张幻灯片以相同的方式显示剩余的幻灯片。

示例 幻灯片 1

幻灯片 2

PHP 代码

<div class="slick_demo_2">
    <?php
    foreach ($boardPins as $boardPin)
    {
        ?>
        <div class="file-box">
            <div class="file">
                <a href="">
                    <span class="corner"></span>
                    <div class="icon">
                        <i class="fa fa-folder " style="color: #1ab394"></i>
                    </div>
                    <div class="file-name text-center">
                                                <span class="badge badge-primary">
                                                    Text
                                                </span>
                    </div>
                </a>
            </div>
        </div>
        <?php
    }
    ?>
</div>

$('.slick_demo_2').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
centerMode: false
});

【问题讨论】：

标签： javascript php jquery css slick.js

【解决方案1】：

想通了。使用 Js 中的 rows 设置来创建网格设计。

rows:3

【讨论】：