Jquery 使用浮雕制作旋转木马时不保留基础网格布局

我正在创建一个需要4张旋转幻灯片的页面，我决定使用slick。4个幻灯片中的每一个都是基础类“行”的div。在每一行中，我有两列，第一列包含h4，在中等屏幕上宽度为3，第二列包含图像，在中等屏幕上宽度为6。这两列都位于行的中心。下面是我的旋转木马部分的外观：

<section id="projects" class="row full-width align-center">

    <div class="columns small-11 align-middle carousel">

        <div class="row full-width align-center align-middle">
            <div class="columns small-12 medium-3 large-3">
                <h4 class="centered uppercased section-title">Human and Robot</h4>
            </div>
            <div class="columns small-12 medium-6 large-6 left">
                <img src="data/pics/robot.gif" alt="robot">
            </div>
        </div>


        <div class="row full-width align-center align-middle">
            <div class="columns small-12 medium-3 large-3">
                <h4 class="centered uppercased section-title">Mini-skype</h4>
            </div>
            <div class="columns small-12 medium-6 large-6 left">
                <img src="data/pics/skype_info.png" alt="skype">
            </div>
        </div>

        <div class="row full-width align-center align-middle">
            <div class="columns small-12 medium-3 large-3">
                <h4 class="centered uppercased section-title">Portfolio</h4>
            </div>
            <div class="columns small-12 medium-6 large-6 left">
                <img src="data/pics/svn.jpg" alt="portfolio">
            </div>
        </div>


        <div class="row full-width align-center align-middle">
            <div class="columns small-12 medium-3 large-3">
                <h4 class="centered uppercased section-title">Chess</h4>
            </div>
            <div class="columns small-12 medium-6 large-6 left">
                <img src="data/pics/chess.png" alt="chess">
            </div>
        </div>

    </div>

</section>

它能够实现旋转木马效果，但行的布局不再保留，两列彼此堆叠，如下所示：

---

我该怎么做才能让斯利克和基金会合作呢？我知道一种方法是修改slick.css或slick.js，但由于某些原因，我不允许这样做（每次我部署页面时都会重新安装slick库）。我还尝试将varaibleWidth:true添加到设置中，但这只会禁用旋转木马效果。你有没有遇到过这个问题，你是如何解决的？

你使用的是哪个版本的基金会？

$(document).ready(function () {
   $(".carousel").slick({
        dots: true,
        speed: 300
    });
});