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 (current
in your rtl css add below without any edit on
[dir='rtl'] .slick-slide { float: left; }
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
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
});
});
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".
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
});
});