javascript - Slick Carousel - 反转顺序

Question

我正在开发的网站上使用 Slick Carousel。

我面临的一个问题是尝试让“ slider 导航”向与标准相反的方向移动。

示例:-

目前顺序如下:-

1 2 3 4 5 6

我需要它按以下方式运行:-

6 5 4 3 2 1

我知道我可以反转我插入的顺序，但我需要发生以下情况:-

6 5 4 3 2 1
1 6 5 4 3 2
2 1 6 5 4 3
etc...

我试图将“slidesToScroll”设置为-1(正如我所见)，但这只会导致我的页面即使在 fiddle 上也会崩溃。

我当前的代码如下所示:-

 $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav',
  autoplay: true,
  centerMode: false,
});
$('.slider-nav').slick({
  slidesToShow: 5,
  infinite: true,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: false,
  centerMode: false,
  focusOnSelect: true,
});

基本设置:-

https://jsfiddle.net/5cyqtvt6/9/

我也尝试过使用 rtl 设置，但由于某种原因，这只是开始显示空幻灯片。

例如。 https://jsfiddle.net/5cyqtvt6/14/

任何帮助将不胜感激。

Answer 1

我设法通过添加解决了该问题

<div class="slider-for" dir="rtl">

和

<div class="slider-nav" dir="rtl">

并将 jQuery 更新为以下内容:-

 $('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav',
    autoplay: true,
    centerMode: false,
    rtl: true
});
$('.slider-nav').slick({
    slidesToShow: 5,
    infinite: false,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: false,
    centerMode: true,
    focusOnSelect: true,
    rtl: true
});

工作 jsFiddle:- https://jsfiddle.net/5cyqtvt6/16/