如何在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>

然后可以用两张卡片对幻灯片进行样式设置，以使卡片堆叠在一起。