nomal note

新人Webデザイナーが個人的に覚えたり作ったりしたコードを投下していきます。検証用なので支離滅裂注意。

slick.js実装メモ

今日は、jQueryライブラリ「slick.js」の実装です。

相変わらずピヨってるので、自分のためにメモ。

執筆記事のように事細かに書きません。忘備録です。参考にもならないと思います。

あしからず。

 

【HTML内にscript定義】

◆読み込む順序

コンテンツの読み込みにラグがでるため、スクリプトは基本bodyの最後に記述します。

プラグインはhard内でOK。hard内の記述の甲乙は以下の通り。
hard内

  1. サニタイズ
  2. scriptのCSS
  3. jsファイル
  4. 自作のscript

f:id:nomal_f:20160921194932p:plain

f:id:nomal_f:20160921194925p:plain f:id:nomal_f:20160921194913p:plain

 

自作したものはどんどんいれこんでいくscript内に入れ込んでいく。

膨らんで構文が乱れるようであれば個別にファイルを生成し、そちらに格納したのちそのファイルを埋め込み治す。

 

◆基本、ダウンロードしたjsの装飾ファイルはいじらない。

色変えなどが必要な場合は別途ファイルを生成して、そのファイル内にスタイルを上書きする。どこに装飾が当たっているかはデベロッパーツールで検索すればOK。コピペして上書きする。


▶今回は_slider.scssを生成して、スタイルあてました。

f:id:nomal_f:20160921195002p:plain

忘れがちですが。中央寄せはこれです

 

◆バグの解消の仕方

Consoleやスタイルを駆使して
親要素をたどっていく。動的要素は親要素にかかっているので、Elementsからたどっていく。そう、ひたすらね

 

ディレクトリ管理のおさらい

  • layoutはユニークなコンテンツパーツ
  • モジュールは凡庸性のある部品パーツ

※その中にscriptのsassも格納する

※scriptのCSSはHTMLないにCSSで記述する

 

◆ライブラリのCSSCSS直下にいれたよ今回は

bowarで管理したほうがぐちゃぐちゃにならなくてすむけど、今回はいいって

ajax-loader.gif

・slick-theme.css

・slick.css

とかbowerで管理して欲しいって。はいごめんなさい。

f:id:nomal_f:20160921194327p:plain

◆error一覧

 

jquery.jsが重複している
※余計なファイルが入っている
※必要なファイルが格納されていないGET404notfound</>

 ちゃんと、errorについては読み取れるようにしなさい。

そしてどうすれば良いかも、ちゃんとおしえてくれるから。(社長)

おっしゃる通りでゲスゲス。

 

コンパイル失敗してるよ

f:id:nomal_f:20160921194906p:plain

社長に_つけてファイルgalpsassすればなおるっていわれたけど、全部CSSファイル生成してくれました!!!なんてこった!!!別に良いって…

 

【参考にした記事】

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

slick.jsの使い方まとめ | cly7796.net