Question

我正在尝试使用光滑的库http://kenwheeler.github.io/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">

应该排序

光滑的轮播永久关闭屏幕

1 个答案: