更新日時:2021.06.07カテゴリ:JavaScript&jQueryjQueryのプラグインには様々なスライダープラグインがあります。ありすぎてどれがいいのかわからないですよね。今回は私がいつも使うプラグイン「slick.js(スリック)」の使い方やオプションカスタマイズを紹介します!slick.jsとは?「slick.js」とはスライダーを作成する為のプラグインです。レスポンシブにも対応していてカスタマイズ性が高く、簡単に実装できるので初心者から上級者まで愛用しています。どんなことができる?「http://kenwheeler.github.io/slick/」これが公式ページです。大きな画像を一枚ずつスライドさせたり、複数の画像をスライドさせたりフェードイン&フェードアウトさせたりできます。詳しくは公式ページを下にスクロールしてください。使い方は超絶簡単です。プラグイン読み込みまずはheadタグで必要なプラグインを読み込みます。src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>jQueryを読み込んでいない場合は必ずslick.jsの記述より前で読み込みましょう。今回はCDNで読み込んでいますが、ダウンロードして読み込みたい場合はこちらからダウンロードしてください。/></div>親要素にクラスを与えます。クラスを与えた要素の直下の子要素がスライドします。javascript(jQuery)の記述$('slide').slick();先程与えたクラス名に対してslickを実行します。これだけでスライダーが完成します。オプションオプションについては以下の記事に詳しく載っています。コメントをキャンセル入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。内容をご確認の上、送信してください。次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。