光滑的轮播幻灯片在彼此之上显示

Posted 2023-05-07

【中文标题】光滑的轮播幻灯片在彼此之上显示

【英文标题】：Slick carousel slides showing on top of each other

【发布时间】：2016-08-22 15:22:22

【问题描述】：

我正在尝试将 slick-carousel 作为 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
    );
);

我迷路了，希望你们能帮忙。

【问题讨论】：

您的代码正在运行。请检查您是否已包含所有必需的文件。在此处参考您的代码 - jsfiddle.net/Bhumika107/bgmrhuso

@Developer107 我没有将 slick.scss 包含在我的项目中。天哪..谢谢男人

很高兴为您提供帮助:)

【参考方案1】：

slick.scss 没有被加载到项目中。