slick.jsによるスライダー実装について

初めて質問します。
slick,js（http://kenwheeler.github.io/slick/）を利用して、
スライダーの実装しているのですが、うまく実装ができず質問しました。

■やりたいこと
公式の「Data Attribute Settings」の動きだが、
スライドの開始、終了位置がコンテンツ幅を超えないようにしたい。
(公式だとコンテンツの表示幅を超えてスライドされる）

■こまっていること
・marginを含めたコンテンツ幅を指定すると、
　slick上では固定幅のコンテンツに＋されて計算される。

質問者からの補足コメント

• fujillin様
  
  ご回答ありがとうございます。
  説明がややこしかったのようなので、シンプルにします。
  
  やりたいことは、「Data Attribute Settings」です。
  ただ、スライドする時に現在のコンテンツ幅を超えてスライドしないようにしたい。ということです。
  ※コンテンツ幅は図１でいうと1280pxです。
  　公式でもスライド時はこの幅を超えてスライドしてしまいます。

  
  No.1の回答に寄せられた補足コメントです。 補足日時：2017/09/22 00:19

No.2 回答者： fujillin 回答日時： 2017/09/22 13:58

ANo1です。

slickを知っているわけではないですが、残念ながらご質問の意味もよくわかりません。

＞やりたいことは、「Data Attribute Settings」です。
No1にも記しましたが、「Data Attribute Settings」は設定方法の手段の話ですので、機能の内容とは無関係なはずです。
（それなので、「Data Attribute Settings」をやりたければ、その設定方法を採用すれば良いだけということになります）

一方で、以下は機能についての話のように思えます。
＞スライドする時に現在のコンテンツ幅を超えてスライドしないようにしたい
コンテンツとおっしゃっているのはスライダーの親要素のことでしょうか？
（図の赤で示した境界を持つ要素のこと？）
「その範囲を超えてスライドしない」ということは「赤い境界を越えてスライドしない」という意味にもとれますが、それだと、そもそもスライドしなくなってしまうのでは？

「一度にスライドする量」の意味でしたら、slidesToScrollを指定することで制御可能なように思われます。
「ドラッグ時にslidesToScrollで指定したスライド数よりも大きく移動してから戻る」、ことを意味しているのなら、それはそのように作られているからではないでしょうか。
（スマホ環境では試していませんが、スワイプ時も同様と推測します）
想像するところ、ドラッグ（スワイプ）と感覚的に合うようにスクロールするように制御していて、離した際に本来の位置へ移動する仕様にしているのだと思います。

どうしてもこれをカスタマイズなさりたいのなら、スクリプトの内部を解析して、ドラッグ（スワイプ）に対応している処理の部分で、スクロール量がslidesToScrollの指定量以上になったらそれ以降は無視するといったような制御を追加することで実現できるのでないかと想像します。

あるいは、いっそのことslickの機能でのドラッグ（スワイプ）は停止して、これに対応するイベント処理だけを自作するという方法もあるかも知れません。
確認はしていませんが、swipeやswipeToSlideあたりのオプションで停止は可能ではないかと思います。（こちらの方が解析をしなくてよい分、簡単かも知れません）
とは言え、通常でユーザに解放されているスライド動作の制御は、「〇番目のスライドへ移動」といった程度ですので、スライド動作中の中間位置などまでを制御することはではできないと思います。
この範囲の制御でどのようなUIにしておくのかは工夫を要するところのように思います。

この回答へのお礼

fujillin様
再度ご回答ありがとうございます。
なかなか伝わらずすみません。

＞「赤い境界を越えてスライドしない」という意味にもとれますが
まさにこちらです。
ちょうど希望の動作を行っている再度がありましたのでそちらで試してみます。
ありがとうございました。

http://ithat.me/2016/10/17/how-to-use-slick-jque …
こちらのガターです。

お礼日時：2017/09/23 00:27

No.1 回答者： fujillin 回答日時： 2017/09/19 10:08

こんにちは

slickについてはほとんど知りませんので、サイト内の説明を斜め読みしただけですが・・・

＞スライドの開始、終了位置がコンテンツ幅を超えないようにしたい
循環表示されないようにしたいということでしょうか？
（いわゆるカルーセルを行いたくないという意味？）
ドキュメントによるとslickではinfiniteオプションとしているようですので、これをfalse指定することで実現できるかと。デフォルトはtrueのようです。

＞marginを含めたコンテンツ幅を指定すると、
＞slick上では固定幅のコンテンツに＋されて計算される。
意味がよくわかりませんが、sliderとして指定した要素の直下の要素群が個々のスライドとして認識される仕組みのようです。
「marginを含める」の意味がわかりませんが、指定されたサイズがスライドのサイズとして認識されるはずと思います。
marginを調整したい場合は、CSSのmarginで調節できます。（.slick-slideのmargin）
DL時のサンプルのregularなどをそのまま単独設置してから、少しずつ変更してみればわかると思います。

Data Attribute Settingsは、単に、オプション指定をHTML内のdata-slick属性から指定する方法を提示しているものなので、基本的な機能はスクリプトのオプションとして指定するのと変わらないはずです。