使い方をまとめました。slider-proやcarouFredSelをご紹介しましたが、slickは両者のいいとこ取りという感じです。詳細は以下の機能概要をご覧ください。画像遅延読み込み可MITライセンスブレイクポイントごとに表示数やスクロール数を決められるのは、他のプラグインにはなかった(はず。)なので、細かく指定したい場合に役立ちますね。必要なファイルを読み込むslick配布元からファイルをダウンロードし、読み込みます。今回使うのは、ダウンロードファイルの中に入ってる以下のファイルです。src="slick.min.js"></script>共通htmlスライドの親要素に任意のクラス名を付与するだけです。リストタグじゃなくてもOKです。src="../images/hoge.jpg"></a></li></ul>共通CSS左右の矢印はwebフォントなので、cssで色が変えられます。デフォルトでは白になっているので、白背景の場合は注意してください。色などの設定はslick-theme.cssをいじると変更できます。画像をスライドさせるだけなら、以下のコードのみでOKです。複数の画像を横並びにするタイプのスライダーです。画面サイズに合わせて表示数を変えるレスポンシブ対応になっています。こちらの例では、デフォルトで画像を6つ、横幅が768px以下になったら3つ、480px以下になったら2つになるように設定しています。});});サムネイル付きのスライダーサムネイルをクリックするとスライドするタイプです。スライダー本体をフリックすると、サムネイルも一緒にスライドするようになっています。});});CenterMode(中央寄せレスポンシブ)両端のはみ出して見せるスライドの幅を指定できるのが良いですね。slidesToScroll(スライドさせる数)を2以上に指定しても、1になるようです。});});画像を遅延読み込みするスライダースライドされるまで画像が読み込まれないようにすることができるので、画像容量が大きい場合に役立ちそうです。スライドの画像は01.jpg〜04.jpgですが、操作するまで01.jpgしか読み込まれていません。htmlimgタグでsrcではなくdata-lazy属性に画像のパスを指定します。gimmicklogauthor:ponzuこのサイトは自分の備忘録でもありますが、どうせならシェアしていきたいと考えて運営しております。免責:当サイトで紹介した情報によって生じたいかなる障害にも当サイトは責任を負いません。