光滑的旋转木马永久离开屏幕

Question

我正在尝试使用光滑的库http://kenwheeler.github.io/slick/创建一个光滑的旋转木马

Slick 正在加载并且它正在正确应用类、容器、按钮等，但幻灯片永久不在屏幕上。活动幻灯片上的 translate3d x 值始终设置在窗口之外。单击“上一个”按钮或拖动幻灯片时，我可以将其拉入屏幕，但一旦到达 0,0,0 位置，它就会立即返回到屏幕外。这是我尝试让它工作的尝试

<div class="slick-slider homepage-slider">
    <div>
        <a href="#">
            <div class="slide-content"><img src="http://placehold.it/350x150">
                <div class="slide-text">
                    <h2 class="slide-title">Slide Title</h2>
                    <div class="slide-caption">
                        <p>Slide Summary</p>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div>
        <a href="#">
            <div class="slide-content"><img src="http://placehold.it/350x150">
                <div class="slide-text">
                    <h2 class="slide-title">Slide Title</h2>
                    <div class="slide-caption">Slide summary</div>
                </div>
            </div>
        </a>
    </div>
    <div>
        <a href="#">
            <div class="slide-content"><img src="http://placehold.it/350x150">
                <div class="slide-text">
                    <h2 class="slide-title">Slide title</h2>
                    <div class="slide-caption">
                        <p>Slide summary</p>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>

在我的 js 文件中，我正在使用

jQuery(document).ready(function() {
    jQuery('.homepage-slider').slick({
        rtl: true
    });
});

http://jsfiddle.net/q1qznouw/549/

注意：拖动在我的网页上有效，但在 jsfiddle 沙箱中无效

我没有收到任何 javascript 错误。幻灯片永久位于浏览器窗口外的 translate3d 位置，而当拖动到屏幕上时，放手时返回浏览器窗口外，是否有原因？

Answer 1

问题出在你的rtl设置上。这需要一些额外的标记才能工作（来自 Slick 文档）：

注意：HTML 标记或滑块的父级必须将属性“dir”设置为“rtl”。

如果您从此更改光滑的父 div：

<div class="slick-slider homepage-slider">

对此：

<div class="slick-slider homepage-slider" dir="rtl">

那应该排序