时间戳

首页 > 解决方案 > slick-carousel 没有错误，但 3 个元素的滑块的外观已损坏

javascript - slick-carousel 没有错误，但 3 个元素的滑块的外观已损坏

问题描述

我正在使用来自https://kenwheeler.github.io/slick/的 slick js ，它似乎可以工作，因为当我拖动鼠标时，元素已正确选择，但滑块的视觉效果已关闭（元素应该在线，而不是在彼此之上）。

当我点击唯一可见的导航按钮时它也可以工作（应该有两个）

有没有人遇到过这个问题或知道这可能来自哪个选项？

这是 slick 导入（安装的 slick-carousel 版本是 1.8.1）：

var slick = require('slick-carousel/slick/slick');

这是滑块的 js 配置：

var slick3cols = {
    infinite:false,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows:false,
    dots: false,
    mobileFirst:true,
    responsive: [{
        breakpoint: 600,
        settings: {
            slidesToShow: 2,
        }
    },{
        breakpoint: 1023,
        settings: {
            slidesToShow: 3,
            dots: false,
            nav: true,
            arrows:true,
            nextArrow: '<div class="slide-next"></div>',
            prevArrow: '<div class="slide-prev"></div>',
        }
    }],
};

这是html：

<div class="slider slider3cols nav-blue slider-large column is-12 flex align-center justify-center">
{% for card in cards %}
    <a href="#" class="card flex" data-type="evenement">
        <div class="card-content">
            <div class="card-title">
                <h4>lorem ispum dolor set</h4>
            </div>
        </div>
    </a>
{% endfor %}

这是页面上的结果：

带有 3 张幻灯片的光滑滑块显示

ps 这里我在一个光滑的滑块中有 5 个元素，有 3 个幻灯片要显示

我在控制台中也没有任何错误

标签： javascriptslick.js

解决方案

在您的scss文件中，尝试添加此导入文件...

@import "~slick-carousel/slick/slick";

这个核心 css 是轮播功能的原始光滑框架。

导入文件时，node_modules您scss可以使用~ for 速记来获取供应商 css 文件。而且您不需要包含文件扩展名。

如果您想使用 slicks 默认主题样式（箭头、圆点等），则还包括...

@import "~slick-carousel/slick/slick-theme";

我个人从不使用 slick 主题，因为使用 init'ed slick 类很容易为 slick 设置样式以匹配您当前的主题。

推荐阅读