Slick Slider 不显示任何内容

Question

Slick 滑块无法正常初始化我认为 slick 使他的父级宽度不正确。但我不确定发生了什么。我有这种印象，因为当我 "inspect element" 我看到 width:35000 px;

为了简单起见，我写了这个简单的代码

<div style="text-align: center;">
        <div id="AboutUsSlider" style="width: 90%; display: inline-block;">
            <div><img src="/images/banners/727X300.jpg"></div>
            <div><img src="/images/banners/727X300.jpg"></div>
            <div><img src="/images/banners/727X300.jpg"></div>
            <div><img src="/images/banners/727X300.jpg"></div>
            <div><img src="/images/banners/727X300.jpg"></div>
            <div><img src="/images/banners/727X300.jpg"></div>
            <div><img src="/images/banners/727X300.jpg"></div>
        </div>
</div>
<script>
$(document).ready(function(){
    $("#AboutUsSlider").slick({
        rtl:true,
        infinite:true,
        centerMode: true,
        variableWidth: true,
        dots: true,
        speed: 500,
        cssEase: 'linear',
        autoplay: true,
        autoplaySpeed: 6000,
        arrows: true
    });
});
</script>

如果你们想现场观看， new.jccayer.com/test.php

有人知道为什么会这样吗？任何 help/comment 都值得赞赏！

编辑

我以他们在下载的 "Slick" .zip 中提供的示例为例在线发布于 new.jccayer.com/test.html 我们可以比较一下 new.jccayer.com/test.php 是我的

两个页面都使用我服务器上的文件。所以没有cdn。和两个相同的文件。这意味着只有此页面中的源代码有问题。（因为示例有效）

我仍然无法弄清楚这两个文件有什么不同。我是不是因为我一直在努力使这项工作变得盲目？

有人吗？

Answer 1

我已经通过摆脱 rtl 选项设法让这个在本地工作 - 你能测试一下摆脱那个选项是否适合你吗？所以代码只是：

$(document).ready(function(){
    $("#AboutUsSlider").slick({
        infinite:true,
        centerMode: true,
        variableWidth: true,
        dots: true,
        speed: 500,
        cssEase: 'linear',
        useTransform:false,
//      autoplay: true,
//      autoplaySpeed: 6000,
        arrows: true
    });
});

如果您不想删除任何选项，请参阅 http://kenwheeler.github.io/slick/ 上的详细文档以了解如何处理从右到左 -

Note: the HTML tag or the parent of the slider must have the attribute "dir" set to "rtl".

那么，您的 div 标签中将只有 dir="rtl"。两者都有效。如果您有任何问题，请告诉我！

Answer 2

我发现将 CSS 父项的溢出设置为隐藏有时也有帮助。

.parent-foo{
postion:relative; /* not always necessary */ 
overflow:hidden;
}

Slick Slider 不显示任何内容

Slick Slider not showing anything

html

javascript

css

jquery

slick.js