Slick轮播从右向左

Question

我已经将Slick Carousel设置为连续滚动，但我需要它向相反方向滚动。添加RTL选项似乎没有起作用。

这里是示例（当前从左到右）：

http://jsfiddle.net/mth2ghod/

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

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

    });
});

- benc

---

请参见 https://github.com/kenwheeler/slick/issues/2968。提到了“阿拉伯语中Slick滑块不起作用#3702”，因此似乎在从右到左的语言（如波斯语和希伯来语）上也无法正常工作。 - QMaster

Answer 1

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

正确的方法是向滑块容器（HTML元素）添加属性dir="ltr"或在滑块设置中添加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示例

- Boy Mark

---

谢谢，伙计！我错过了 dir="rtl" 部分。在我看来，这个答案必须是正确的答案，或者至少得到更多的投票。 - hayatbiralem

感谢您的赞美之词@hayatbiralem， 您关注了这篇文章，我在代码示例中进行了小修正。 - Boy Mark

Answer 2

将slidesToScroll更改为-1（它会更改幻灯片方向）

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

    });
});

- Bob Tate

---

如果我使用 slidesToScroll: -1，我的滑块完全崩溃了，是否有什么改变了吗？ - Loosie94

@Loosie94 你说得对。GitHub上的问题还没有得到回答：https://github.com/kenwheeler/slick/issues/2063 - QMaster

Answer 3

在你的RTL CSS中，不需要进行任何编辑，只需添加以下内容：

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

- Bilal Talal

---

最好附上您答案的解释。 - confetti

只有在保持centerMode为true时，这才能解决问题。如果您关闭CenterMode:false，请查看此示例，那么它将不会显示当前序列...此模板中的序列显示为7,6,5,4,1，您会注意到只有在单击箭头或自动播放后，幻灯片2和3才会显示... https://themeflex.com/strucflex/ar/ - Learning

@Bila Talal：非常感谢您。经过很多努力，终于发现您的解决方案适合我，并且您的建议完美地起作用了。 - sangeeta

Answer 4

这对我有用，

我向滑块容器添加 ( dir="rtl" )，然后在 Slick 滑块设置中添加 ( rtl: true )

$('.carousel-rtl').slick({
    infinite: true,
    slidesToShow: 2,
    slidesToScroll: 1,
    arrow: true,
    dots: true,
    rtl: true,
  });

<div class="wrapper">
  <div class="slide-wrapper">
    <h2>Slick with RTL<h2>
    <div class="carousel-rtl" dir="rtl">
      <p>0</p>
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
    </div>
  </div>
</div>
    

您可以在此处查看示例 https://codepen.io/davecar21/pen/RwovWvB。

- davecar21

Answer 5

我知道这已经过时了，但是Slick文档中提到：

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

- Juandres Yepes Narvaez

Answer 6

这是一个从顶部到底部的垂直滑块的示例。

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

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

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

});
});

- Rijo

Answer 7

根据Slick GitHub页面，修复bug的CSS代码如下：

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

并且

.slick-slider .slick-track, .slick-slider .slick-list {
direction: ltr;
}

https://github.com/kenwheeler/slick/issues/2968#issuecomment-1143535266

- Hossein Hashemi

Answer 8

Slick Carousel RTL和LTR

示例：英语（LTR）和阿拉伯语（RTL）

适用于RTL的Slick Carousel：

$(".slider-nav").slick({
    arrows: false,
    fade: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    rtl: true
});

从左到右的Slick Carousel：

$(".slider-nav").slick({
    arrows: false,
    fade: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    rtl: false //not mandetory in LTR
});

- Ved Prakash N

Answer 9

在滑块容器中添加[dir="ltr"]，并在slick滑块设置中添加[rtl: false]，这样问题就解决了。

示例代码：

this.$hero.slick({
      accessibility: true,
      arrows: false, // this theme has custom arrows
      draggable: false,
      dots:true,
      fade: false,
      rtl: false,
      autoplay: this.$hero.data('autoplay'),
      autoplaySpeed: this.$hero.data('speed')
    }).slickAnimation();

- Paul Anigbo

Answer 10

如果您想让Slick轮播从右到左，那么请从Slick滑块主DIV中删除dir="rtl"，并从jquery部分中删除rtl: true。

dir="rtl" /* Remove from slick slider div
rtl: true  /* Remove line from slick slider jquery

例如：

https://codepen.io/davecar21/pen/RwovWvB

本例中：

- manoj