光滑的旋轉木馬幻燈片顯示在彼此的頂部

Question

我正在嘗試在單頁網站的其中一個部分中使用光滑輪播作為100vh滑塊。

我正在使用jade，browserify，sass等。這是輸出：

我將html / css簡化為僅背景色，但其實際內容相同。

如您所見，幻燈片在彼此上方顯示，並且它們也已被克隆。 當您使用centerMode和無限設置時，我讀到了光滑的克隆幻燈片。

這是我的代碼：

玉：

  section.services
    .slick
      .red
      .green
      .blue

SCSS：

section.services {
    @extend .padding0;
    @include bgcolor(#fff);

    .slick, .slick * {
        outline: none;
    }
}

.red {
    height: 100px;
    background: red;
}

.blue {
    height: 100px;
    background: blue;
}

.green{
    height: 100px;
    background: green;
}

JS：

window.jQuery = window.$ = require('jquery');
slick = require('slick-carousel');

//DOM Ready
$(function(){  
    $('.slick').slick({
        slidesToShow: 1,
        speed: 300,
        autoplay: true,
        dots: true
    });
});

我在這里迷路了，希望你們中的一個能提供幫助。

Answer 1

slick.scss尚未加載到項目中。