javascript - 从右到左的光滑旋转木马

Question

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

在这里 fiddle (目前从左到右)

http://jsfiddle.net/mth2ghod/

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

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

    });
});

Answer 1

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

正确的方法是将属性 dir="ltr" 添加到 slider 的容器(HTML 元素)或将 rtl: false 属性添加到 slider 设置:

// 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