web-dev-qa-db-ja.com

右から左に滑らかなカルーセル

連続的にスクロールするように滑らかなカルーセルを設定しましたが、反対方向にスクロールする必要があります。 RTLオプションの追加は機能していないようです。

ここをいじる（現在は左から右）

http://jsfiddle.net/mth2ghod/

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

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

    });
});
javascriptjquerycarousel
8
bengem

SlidesToScrollを-1に変更します（スライドの方向を変更します）

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

    });
});
14
Bob Tate

「slidesToScroll」プロパティを負の値（例：slidesToScroll: -1,）に設定することは、ネイティブソリューションではありません。これにより、画像のスムーズフローの問題が発生しました。

正しい方法は、属性dir="ltr"をスライダーのコンテナー（HTML要素）に追加することですOR rtl: falseプロパティをスライダー設定に追加します。

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

注：これにより、テキストの方向も逆になり、CSS direction: ltr;で変更できます。

JS Fiddle例

6
Boy Mark

これは、上から下へのverticalスライダーの例です。

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

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

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

});
});
0
Rijo K P

rtl cssで、編集せずに以下を追加します

[dir = 'rtl'] .slick-slide {float：左; }

0
Bilal Talal

これが古いことを知っていますが、洗練されたドキュメントには次のように書かれています。

注：HTMLタグまたはスライダーの親では、属性「dir」を「rtl」に設定する必要があります。

0
Juandres Yepes Narvaez