Question

我正在创建一个需要有4个轮播幻灯片的页面，我决定使用光滑的。 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轮播效果之前，每个轮播都是这样的（这是所需的布局）：

然而，在我的js文件中调用光滑功能之后：

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

它能够实现轮播效果，但不再保留行的布局，并且两列相互堆叠，如下所示：

如何让Slick与Foundation合作？我知道一种方法是修改slick.css或slick.js但由于某种原因我不允许这样做（每次部署页面时都会重新安装光滑的库）。我也尝试在设置中添加一个varaibleWidth：true，但这只是禁用轮播效果。你们有没有遇到过这个问题，你是如何解决的？

使用Slick创建轮播时不保留基础网格布局

0 个答案: