
初めて質問します。
slick,js(http://kenwheeler.github.io/slick/)を利用して、
スライダーの実装しているのですが、うまく実装ができず質問しました。
■やりたいこと
公式の「Data Attribute Settings」の動きだが、
スライドの開始、終了位置がコンテンツ幅を超えないようにしたい。
(公式だとコンテンツの表示幅を超えてスライドされる)
■こまっていること
・marginを含めたコンテンツ幅を指定すると、
slick上では固定幅のコンテンツに+されて計算される。

A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
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 …
こちらのガターです。
No.1
- 回答日時:
こんにちは
slickについてはほとんど知りませんので、サイト内の説明を斜め読みしただけですが・・・
>スライドの開始、終了位置がコンテンツ幅を超えないようにしたい
循環表示されないようにしたいということでしょうか?
(いわゆるカルーセルを行いたくないという意味?)
ドキュメントによるとslickではinfiniteオプションとしているようですので、これをfalse指定することで実現できるかと。デフォルトはtrueのようです。
>marginを含めたコンテンツ幅を指定すると、
>slick上では固定幅のコンテンツに+されて計算される。
意味がよくわかりませんが、sliderとして指定した要素の直下の要素群が個々のスライドとして認識される仕組みのようです。
「marginを含める」の意味がわかりませんが、指定されたサイズがスライドのサイズとして認識されるはずと思います。
marginを調整したい場合は、CSSのmarginで調節できます。(.slick-slideのmargin)
DL時のサンプルのregularなどをそのまま単独設置してから、少しずつ変更してみればわかると思います。
Data Attribute Settingsは、単に、オプション指定をHTML内のdata-slick属性から指定する方法を提示しているものなので、基本的な機能はスクリプトのオプションとして指定するのと変わらないはずです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ポストバック(__doPostback)へ...
-
複数選択のListBoxでClickイベ...
-
C#でドラッグ&ドロップが機能し...
-
VBAで一時中断したプログラムの...
-
getParameterで値が取得できず...
-
コネクション・セッション・ト...
-
異なるformのsubmitボタンを同...
-
DataGridViewのチェックボック...
-
aspxをhtmlに変換する方法について
-
Webページ上のボタン等の位置を...
-
JSPでボタンを押したら、文字が...
-
テキストボックスのクリックで...
-
Eclipseでクリーンが出来ない
-
submitボタンにvalue属性の値で...
-
Accessの画面更新を一時的に停...
-
VC++ MFC CListCtrlで、ボタン...
-
同じソリューション内の別のプ...
-
PHPからWindowsログインユーザ...
-
会社への勤怠届出にGoogleフォ...
-
Global.asaについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
複数選択のListBoxでClickイベ...
-
ポストバック時の画面スクロー...
-
C#でドラッグ&ドロップが機能し...
-
ポストバック(__doPostback)へ...
-
Ctrl+vのイベントを解除
-
【ASP.NET】マスターページに配...
-
【VB6】 変数1 = 変数1 Or $H2
-
DragEnterイベントについて(VS...
-
aspxファイル実行時の表示順に...
-
【ASP2.0】TextBoxのフォーカス...
-
リストビュー内でのドラッグ&...
-
[ASP.NET] ページ内でジャンプ。
-
自作exeを常駐させるとPCがシャ...
-
TreeViewの制御について
-
ドラッグドロップ(AllowDrop)に...
-
VBのタイマーイベントについて
-
VBAで一時中断したプログラムの...
-
画面遷移が不正ですと表示されます
-
getParameterで値が取得できず...
-
コネクション・セッション・ト...
おすすめ情報
fujillin様
ご回答ありがとうございます。
説明がややこしかったのようなので、シンプルにします。
やりたいことは、「Data Attribute Settings」です。
ただ、スライドする時に現在のコンテンツ幅を超えてスライドしないようにしたい。ということです。
※コンテンツ幅は図1でいうと1280pxです。
公式でもスライド時はこの幅を超えてスライドしてしまいます。