2016-04-28 18 views
1

私は単一のページのウェブサイト上の私のセクションの一つに滑り台を100vhスライダーとして使用しようとしています。滑らかなカルーセルのスライドがお互いの上に表示されます

私はヒスイ、browserify、SASS、などを使用していますが、ここでは出力です:

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を含めていませんでした。うーん..ありがとう男 –

+1

私はあなたを助けてうれしいです:) – Bhumika107

答えて

4

slick.scssがプロジェクトに読み込まれていませんでした。

関連する問題