slick-sliderなのですが、オプションとしてprevArrowに＄（）と指定したらどうなるのでしょうか。

Question

おそらくスライドするための矢印にプロパティを当てられるようですが、なぜそうなるのかわかりませんでした。

$()

ってjqueryオブジェクト化するための書き方だと思っていて、その後にドットで区切ってイベントやメソッドを指定するものだと思っていたのですが、あるサイトで

prevArrow: $("#100028 .carousel__arrow__container.m--prev")

としか書いていなくて、意味が理解できなかったのですが仕組みを教えていただけないでしょうか。

slickの公式サイト↓

slick

Comments

[kei344]

プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

[ipnetfirm]

追加しましたがこれで大丈夫でしょうか。

Answer 1

jQueryオブジェクトは変数に代入して、後からメソッド呼び出しをすることができます。

var target = $('.slider');

target.noop();
//$('.slider').noop(); と同じ

配列に入れることもできます。

var target = [$('.slider'), $('.slider2')];

target[0].noop();
//$('.slider').noop(); と同じ

オブジェクトに入れることもできます。

var target = {
  hoge: $('.slider'), 
  fuga: $('.slider2'),
};

target['hoge'].noop();
target.hoge.noop();
//両方とも $('.slider').noop(); と同じ

　
なので、

$('.slider').slick({
  prevArrow: $("#100028 .carousel__arrow__container.m--prev")
});

とすると、後からslickプラグインが内部で$("#100028 .carousel__arrow__container.m--prev")に対してメソッドなどを使える、ということです。

Comments

[ipnetfirm]

大変助かりました。
このたびは本当にありがとうございました。

Answer 2

公式サイトにprevArrowに設定できる値が書かれているので、それを確認してみては。

【slick - the last carousel you'll ever need】
http://kenwheeler.github.io/slick/

prevArrow
Type: string (html|jQuery selector) | object (DOM node|jQuery object)
Default: <button type="button" class="slick-prev">Previous</button>
Allows you to select a node or customize the HTML for the "Previous" arrow.

string の html はHTMLの文字列（例: <div>prev</div> ）
string の jQuery selector はjQueryで使うセレクタ（例: #prev ）
object の DOM node はDOM（例: document.getElementById('prev') ）
object の jQuery object はjQuery object（例: $('#prev') ）

Comments

[ipnetfirm]

ありがとうございます。
確認してみたいと思います。