javascript - Slick Carousel - Reversing order - Stack Overflow

admin管理员组

文章数量:1392101

I am using Slick Carousel on a site I am developing.

An issue I am facing is attempting to get the "slider-nav" to move in the opposite direction to the standard.

Example:-

Currently the order is as follow:-

1 2 3 4 5 6

I need it to run as the following:-

6 5 4 3 2 1

I know I could just reverse the order I am pushing then in but I need the following to happen:-

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

I have attempted to set the "slidesToScroll" as a -1 (as I have seen ) but this just causes my page to crash even on fiddle.

My current code look like:-

 $('.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,
});

Basic setup:-

/

I have also attempted to use the rtl settings but this for some reason just starts to show empty slides.

Eg. /

Any help would be greatly appreciated.

I am using Slick Carousel on a site I am developing.

An issue I am facing is attempting to get the "slider-nav" to move in the opposite direction to the standard.

Example:-

Currently the order is as follow:-

1 2 3 4 5 6

I need it to run as the following:-

6 5 4 3 2 1

I know I could just reverse the order I am pushing then in but I need the following to happen:-

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

I have attempted to set the "slidesToScroll" as a -1 (as I have seen ) but this just causes my page to crash even on fiddle.

My current code look like:-

 $('.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,
});

Basic setup:-

https://jsfiddle/5cyqtvt6/9/

I have also attempted to use the rtl settings but this for some reason just starts to show empty slides.

Eg. https://jsfiddle/5cyqtvt6/14/

Any help would be greatly appreciated.

• javascript
• jquery
• html
• slick.js

Share Improve this question Follow asked Mar 29, 2018 at 13:00 Tony HenslerTony Hensler 1,49266 gold badges1616 silver badges3030 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

I managed to fix the issue by adding

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

and

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

and also updating the jQuery to the following:-

 $('.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
});

Working jsFiddle:- https://jsfiddle/5cyqtvt6/16/

本文标签： javascriptSlick CarouselReversing orderStack Overflow