Question

光滑滑块不会正常启动我认为光滑的是他的父母宽度不合情理。但我不确定发生了什么。我受到这种冲击，因为当我“检查元素”时，我看到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

任何人都知道为什么会这样？任何帮助/评论是apreciated！

修改

我举了他们在下载的“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/上的光滑文档，了解如何从右向左处理 -

注意：HTML标记或滑块的父级必须具有该属性＆＃34; DIR＆＃34;设置为＆＃34; rtl＆＃34;。

那么，你的div只会有dir =＆＃34; rtl＆＃34;在标签中。两者都有效。如果您有任何问题，请告诉我们！

Answer 2

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

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

光滑滑块没有任何显示

2 个答案: