我有slick.js一次循环运行 5 个图像。
我遇到的问题是让 15 张图片显示在第一张幻灯片上,以 5 横 3 下的布局堆叠,这样用户可以一次滚动/分页浏览 15 张图片,而不仅仅是 5 张。
我目前正在使用:
var slickOpts = {
slidesToShow: 5,
slidesToScroll: 5,
dots: true,
prevArrow: '.btn-prev',
nextArrow: '.btn-next'
};
当我将 slidesToShow
和 slidesToScroll
都设置为 15 时,它只是将它们全部放在一行而不是堆叠它们。
我也试过增加父容器的高度,但还是不行。
#dashboard {
height: 600px
}
我怎样才能让它们堆叠在 5x3 布局中并一次滚动 15 个?
最佳答案
您可以告诉插件前 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。
关于javascript - 在轮播中堆叠图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28577741/