Question

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

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

实施例： -

目前订单如下： -

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（正如我所见），但这只会导致我的页面在小提琴上崩溃。

我目前的代码如下： -

 $('.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设置，但出于某种原因，这只是开始显示空幻灯片。

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

光滑的轮播 - 逆转顺序

1 个答案: