slickの基本123456$(function(){$('.slider').slick();});これで、slickスライダーの準備はOKです。カスタマイズオプションslickには、たくさんのオプションが用意されています。これらをうまく組み合わせることで、複雑なスライダーを作成することもできます。$slider.slick('getSlick');console.log(slick_obj);ロード中は非表示にWebサイトが表示されてからslickスライダーが初期化までの間、少しだけラグがあります。この間、スライドが縦に並んだり、画像が元サイズで表示されたりしてしまいます。他サイトを見てみると、フェードインでごまかす、0.3秒後に表示させるなど、非常に適当な説明で済ましてしまっています。slickはちゃんとそのようなことも考えて設計されています。いうクラスが付与されます。block;}たったこれだけでロード後に表示させることができます。コンテナで囲っているときスライダー123456$('.slider').slick();この場合、ロード後には次のようになります。クラスを追加する必要があります。block;}CSSは先ほどと同じような感じです。'px');});slickスライダーはスライドの横幅が必ず整数pxになるようにしてあります。これは小数点以下が表示されないため、微妙にスライド間に隙間が空いたりする原因になります。そこで、小数点以下まで表示させるように記述してやります。</head>矢印ボタンにはFontAwesomeを使用します。CDNから読み込んでおきます。'px');});ネガティブマージンを使って、スライドとスライドのガター(間隔)を設定します。'px');});こんな感じで簡単に複雑なスライダーを作成することができます。互いのスライダーを指定することで連携ができます。});});複数のスライダーを使用するときは注意が必要です。スライダーごとにクラス名を変えればいいのですが、それだとJavaScriptの記述が増えてしまいます。関数を使って、何番目のスライダーを操作しているかを明確に指定します。これで、いくつスライダーが増えたとしても大丈夫です。