从右到左的光滑旋转木马

Question

我已经将 slick carousel 设置为连续滚动，但是我需要向相反的方向滚动。添加 RTL 选项似乎不起作用。

Fiddle 这里（目前从左到右）

 $(function(){
    $('.slider').slick({

        speed: 10000,
        autoplay: true,
        autoplaySpeed: 100,
        cssEase: 'linear',
        slidesToShow: 1,
        slidesToScroll: 1,
        variableWidth: true

    });
});

Answer 1

将 slidesToScroll 改为 -1（它会改变滑动方向）

 $(function(){
    $('.slider').slick({
       speed: 10000,
       autoplay: true,
       autoplaySpeed: 100,
       cssEase: 'linear',
       slidesToShow: 1,
       slidesToScroll: -1,
       variableWidth: true

    });
});

Answer 2

这是从上到下的垂直滑块的示例。

http://jsfiddle.net/mth2ghod/114/

$(function(){
$('.slider').slick({

    speed: 5000,
    autoplay: true,
    autoplaySpeed: 0,
    cssEase: 'linear',
    slidesToShow: 1,
    slidesToScroll: -1,
    vertical: true

});
});

Answer 3

知道这是旧的，但巧妙的文档说：

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

Answer 4

将 "slidesToScroll" 属性设置为负值（例如 slidesToScroll: -1,）不是本机解决方案。这产生了图像流畅的问题。

正确的方法是将属性 dir="ltr" 添加到滑块的容器（HTML 元素）或将 rtl: false 属性添加到滑块设置：

// add an attribute dir="ltr" to the slider's container
//$('.slider').attr('dir', 'ltr');

// OR add `rtl: false` property to slider settings

$('.slider').slick({
  autoplay: true,
  slidesToShow: 3,
  slidesToScroll: 3,
  dots: true,
  infinite: true,
  cssEase: 'linear',
  rtl: false
});

注意：这将反转文本方向，也可以通过 CSS direction: ltr;

更改

JS Fiddle Example

Answer 5

在您的 rtl css 中添加以下内容，无需对

进行任何编辑

[dir='rtl'] .slick-slide { float: left; }

从右到左的光滑旋转木马

Slick carousel right to left

javascript

jquery

carousel