2016-04-28 84 views
1

我试图在我的单页网站上使用圆滑的旋转木马作为我的部分之一的100vh滑块。圆滑的旋转木马幻灯片显示在彼此的顶部

我用玉,browserify,青菜等,以下是输出:

enter image description here

我简化了HTML/CSS逼到背景颜色,但实际内容出了相同的。

正如你所看到的幻灯片显示在彼此的顶部,他们也克隆。当您使用centerMode和无限设置时,我会阅读那些光滑的克隆幻灯片。

这里是我的代码:

JADE:

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 
    }); 
}); 

我在这里失去了,希望你能及帮帮我。

+2

您的代码正在工作。请检查您是否包含所有必需的文件。请参阅此处的代码 - https://jsfiddle.net/Bhumika107/bgmrhuso/ – Bhumika107

+0

@ Developer107我的项目中没有包含slick.scss。 Jeez ..谢谢你 –

+1

我很高兴帮助你:) – Bhumika107

回答

4

slick.scss未被加载到项目中。

相关问题