Slick carousel right to left

问题

I've setup slick carousel to continuously scroll, however I need to to scroll in the oposite direction. Adding the RTL option didn't seem to work.

Fiddle here (currently left to right)

http://jsfiddle.net/mth2ghod/

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

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

    });
});

回答1:

Change the slidesToScroll to a -1 (it will change the slide direction)

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

    });
});

回答2:

Setup "slidesToScroll" property to a negative value (e.g slidesToScroll: -1,) is not a native solution. This produced images smooth flow problem.

The right way is to add an attribute dir="ltr" to the slider's container (HTML element) OR add rtl: false property to slider settings:

// 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
});

Note: This will reverse text direction also which can be changed by the CSS direction: ltr;

JS Fiddle Example

回答3:

Here is the example for vertical slider from top to bottom.

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

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

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

});
});

回答4:

know this is old, but the slick docs says:

Note: the HTML tag or the parent of the slider must have the attribute "dir" set to "rtl".

回答5:

in your rtl css add below without any edit on

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

来源：https://stackoverflow.com/questions/29770969/slick-carousel-right-to-left

标签

javascript

jquery

carousel