在轮播中堆叠图像

Question

我有 slick.js 运行 5 张图片一次循环。

我遇到的问题是让 15 张图片显示在第一张幻灯片上，以 5 横 3 下的布局堆叠，这样用户就可以 scroll/paginate 一次显示 15 张图片，而不仅仅是 5 张。

我目前正在使用：

var slickOpts = {
        slidesToShow: 5,
        slidesToScroll: 5,
        dots: true,
        prevArrow: '.btn-prev',
        nextArrow: '.btn-next'
    };

当我将 slidesToShow 和 slidesToScroll 都设置为 15 时，它只是将它们全部放在一行而不是堆叠它们。

我也试过增加父容器的高度，但还是不行。

#dashboard {
    height: 600px
}

如何让它们堆叠在 5x3 布局中并一次滚动 15 个？

http://jsfiddle.net/q1qznouw/19/

Answer 1

Please check

勾选http://jsfiddle.net/q1qznouw/23/
您需要设置
height:200px！重要； width:200px！重要；
在面板中，还需要将 overflow:hidden 设置到您的仪表板并相应地设置其高度

Answer 2

DEMO

您可以告诉插件前 15 个项目是 1 个项目，这样您就可以滚动一组 15 个项目。

HTML:

<div id="dashboard">
    <div class="panel">
        <div class="panel__item">1</div>
        <div class="panel__item">2</div>
        <div class="panel__item">3</div>
        <div class="panel__item">4</div>
        <div class="panel__item">5</div>
        <div class="panel__item">6</div>
        <div class="panel__item">7</div>
        <div class="panel__item">8</div>
        <div class="panel__item">9</div>
        <div class="panel__item">10</div>
        <div class="panel__item">11</div>
        <div class="panel__item">12</div>
        <div class="panel__item">13</div>
        <div class="panel__item">14</div>
        <div class="panel__item">15</div>
    </div>
    <div class="panel">
        <div class="panel__item">16</div>
        <div class="panel__item">17</div>
        <div class="panel__item">18</div>
        <div class="panel__item">19</div>
        <div class="panel__item">20</div>
        <div class="panel__item">21</div>
        <div class="panel__item">22</div>
        <div class="panel__item">23</div>
        <div class="panel__item">24</div>
        <div class="panel__item">25</div>
        <div class="panel__item">26</div>
        <div class="panel__item">27</div>
        <div class="panel__item">28</div>
        <div class="panel__item">29</div>
        <div class="panel__item">30</div>
    </div>
</div>

CSS（对于布局）：

.panel__item {
    border: 10px solid #333;
    background: #ccc;
    height:200px;
    margin: 10px;
    font-size: 72px;
    text-align: center;
    line-height: 200px;
    margin: 2%;
    width: 16%;
    float: left;
    box-sizing: border-box;
}
.panel__row {
    margin: 0 -2%;
}

不要忘记将 JS 中的项目数从 5 更改为 1。

在轮播中堆叠图像

Stacking images in carousel

javascript

css

jquery

carousel