Slick carousel right to left

前端 未结 5 1654
有刺的猬
有刺的猬 2021-02-05 23:18

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

相关标签:
5条回答
  • 2021-02-05 23:52

    in your rtl css add below without any edit on

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

    0 讨论(0)
  • 2021-02-06 00:02

    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

    0 讨论(0)
  • 2021-02-06 00:03

    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
    
        });
    });
    
    0 讨论(0)
  • 2021-02-06 00:14

    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".

    0 讨论(0)
  • 2021-02-06 00:17

    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
    
    });
    });
    
    0 讨论(0)
提交回复
热议问题