Zipファイルがダウンロードされるので、解凍してください。中にいろいろなフォルダが含まれていますが、必要になるのはslickフォルダにある下記の5点のみです。fontsフォルダslick.cssslick-thime.cssslick,min.jsajaxloader.gif↑のような感じで読み込ませれば事前準備はOKです。slickの使い方ここでは手軽に実装を進めるため、CDNを使った方法で説明します。スライダーのデモを用意しました。CodePen.※見えづらいときは「0.5x」を押してください。ひとつずつ解説します。<head>部分にCDNを読み込ませるheadタグ内にCSS、<body>直下にJSのCDNコードをコピペします。SlickはjQueryで動くので、jQueryのCDNも<head>内で読み込ませましょう。次にスライダー部分を記述していきます。alt=""></div></div>js-sliderというID名が親要素、子要素のslide-itemはスライドさせたい要素です。JSコードを記述するソースコードは下記です。$('#js-slider').slick();});↑一応これだけで、Slickは動きます。なんとお手軽!この状態で見てみると下記のような表示になっているはず。スタイルは崩れてますが、動作はするようになりましたね。スライダーのスタイルを調整しようこのままだと不細工なのでスタイルを調整していきましょう。「Previous」「Next」の部分を矢印に変更します。JSJSファイルに以下を追加してください。prevArrowは、矢印を任意のHTMLに変更することができます。お好みの画像等を入れたい場合はimgタグを入れられます。CSS次にCSSを調整します。スライドを自動再生するかどうかを設定します。ページネーションドットを表示するかどうかを設定します。一度に表示するスライドの数を設定します。一度にスクロールするスライドの数を設定します。スライドのループを有効にするかどうかを設定します。スライドのアニメーションの速度を設定します。中央揃えのスライドを有効にするかどうかを設定します。可変幅のスライドを有効にするかどうかを設定します。スライドの高さを自動調整するかどうかを設定します。レスポンシブなレイアウトを設定します。null他にも色々オプションはあるので、より深く知りたい人は下記を参考にどうぞ!参考【slick】カスタマイズ用オプションまとめ一覧じゅんぺいブログまとめというわけでjQueryライブラリ「Slick」のご紹介でした。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。次の記事Web制作を独学で学ぶために参考にした本・サイトまとめ【言語別...サイト管理人づみ元工場勤務のWebディレクター。現在はWeb制作会社に勤めながら兼業でWeb制作事業を営んでいます。工場退職→フリーのWebライターに転身。→コーディング・プログラミングを独学で学ぶ→Web制作会社に入社。兼業でWeb制作事業。