Question

我已经设置了光滑的旋转木马来连续滚动，但是我需要在相反方向滚动。添加RTL选项似乎无效。

这里小提琴（目前从左到右）

 $(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

将“ slidesToScroll”属性设置为负值（例如slidesToScroll: -1,）不是本机解决方案。这样就产生了图像平滑流动问题。

正确的方法是在HTML标记或滑块容器中添加属性dir="rtl"，然后在滑块设置中添加rtl: true属性：

$('.slider').attr('dir', 'rtl');

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

别担心，这会将滑块从右向左反转，也不会说 rtl：是

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

进行更改。

JS Fiddle Example

Answer 3

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

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

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

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

});
});

Answer 4

知道这很旧，但是光滑的文档说：

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

Answer 5

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

进行任何编辑

[dir ='rtl'] .slick-slide { 向左飘浮; }

光滑的旋转木马从右到左

5 个答案: