如何解决如何在Slick Slider中的第一张幻灯片中排成一列,在所有其他幻灯片中排成两列?
我想将Slick Slider配置为在第一张幻灯片中有一行,在所有其他幻灯片中有两行,例如-> desired result。
这些是幻灯片的当前设置:
$('#our-team-slider').slick({
rows: 2,dots: true,arrows: false,infinite: false,speed: 300,slidesToShow: 4,slidesToScroll: 4,responsive: [
{
breakpoint: 1600,settings: {
slidesToShow: 3,slidesToScroll: 3,infinite: true
}
},{
breakpoint: 1205,settings: {
slidesToShow: 2,slidesToScroll: 2,infinite: true
}
}
]
});
怎么办?
解决方法
一种解决方案是,创建一张包含一张“卡片”的幻灯片,然后再创建一张各包含两张“卡片”的幻灯片,然后设置rows: 1
。例如:
<div id="our-team-slider">
<div class="slide">
<div class="card">...</div>
</div>
<div class="slide">
<div class="card">...</div>
<div class="card">...</div>
</div>
<div class="slide>
<div class="card">...</div>
<div class="card">...</div>
</div>
</div>
然后可以用两张卡片对幻灯片进行样式设置,以使卡片堆叠在一起。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。