Webデザインラボ当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。2017/09/24こんにちは(・∀・)jQueryプラグインを使用したサンプルをご紹介します。今回使用するライブラリはカルーセルスライダーのslickです。v2などをご紹介してきましたが、こちらのプラグインは設置が簡単なのに加えて、スタイルの変更も簡単にできるので、それらプラグイン以上に導入しやすいのではないかと思い今回ご紹介することとしました。こちらのプラグインslickは、配布元にもサンプル例はあるのですが、サンプル例が色々とあり、設定方法もたくさんあって悩みそうなので、当サイトでよく使いそうなパターンのサンプルをいくつか作ってご紹介したいと思います。Contentssingle-itemmultiple-itemscenterslider-for・slider-navファイルのダウンロード次のプラグイン配布元からファイルをダウンロードします。now」をクリックするとダウンロードボタンが表示されますのでそれをクリックしてファイルをダウンロードしてください。ダウンロードしたファイルを解凍するといくつかのファイルとフォルダがあります。その中にあるslick.cssslick-theme.cssslick.min.jsを使用します。falseオートプレイが有りならtrue、無しならfalse。falseナビゲーションの矢印が有りならtrue、無しならfalse。false画像下のドットが有りならtrue、無しならfalse。falseループが有りならtrue、無しならfalse。falseホバーしたとき再生を止めるならtrue、止めないならfalse。デフォルトは300スライドアニメーションの時間オプション設定は他にもあります。プラグイン配布元slickでご確認ください。サンプル(single-item)HTMLslick.cssとslick-theme.cssを<head>内に読み込みます。href="slick-theme.css">次のHTMLを<body>内に読み込みます。*/}こちらのCSSはslick-theme.cssの一部を上書きしてあるだけです。細かく設定したい場合はslick-theme.css内を変更してみてください。JavaScriptサンプルデモ1-1のJavaScriptはこちらです。次のコードを</body>直前に読み込みます。{$('.single-item').slick({dots:true});});</script>サンプルデモ1-2のJavaScriptはこちらです。サンプルデモ1-1と同じく次のコードを</body>直前に読み込みます。2000});});</script>Resultサンプルデモ1-1・サンプルデモ1-2はこちらブレークポイントは480px以下がスマホサイト、768px以下がタブレット、769px以上でPCサイトで設定してあります。サンプルデモ1-1とサンプルデモ1-2のHTMLとCSSは共通です。サンプル(multiple-items)HTMLサンプルデモ1と同じくslick.cssとslick-theme.cssを<head>内に読み込みます。href="slick-theme.css">こちらもサンプルデモ1と同じく次のHTMLを<body>内に読み込みます。クラス名single-itemをmultiple-itemsに変更します。*/}JavaScriptサンプルデモ2-1のJavaScriptはこちらです。こちらもサンプルデモ1と同じく次のコードを</body>直前に読み込みます。1});});</script>サンプルデモ2-2のJavaScriptはこちらです。サンプルデモ2-1と同じく次のコードを</body>直前に読み込みます。0});});</script>Resultサンプルデモ2-1・サンプルデモ2-2はこちらHTMLのクラス名single-itemをmultiple-items変更することを忘れずに。サンプルデモ2-1とサンプルデモ2-2のHTMLとCSSは共通です。サンプル(center)HTML他サンプルデモと同じくslick.cssとslick-theme.cssを<head>内に読み込みます。href="slick-theme.css">こちらも他サンプルデモと同じく次のHTMLを<body>内に読み込みます。クラス名をcenterに変更します。*/}JavaScriptサンプルデモ3-1のJavaScriptはこちらです。こちらも他サンプルデモと同じく次のコードを</body>直前に読み込みます。false}}]});});</script>サンプルデモ3-2のJavaScriptはこちらです。サンプルデモ3-1と同じく次のコードを</body>直前に読み込みます。false}}]});</script>Resultサンプルデモ3-1・サンプルデモ3-2はこちらHTMLのクラス名をcenterに変更することを忘れずに。サンプルデモ3-1とサンプルデモ3-2のHTMLとCSSは共通です。サンプル(slider-for・slider-nav)HTML他サンプルデモと同じくslick.cssとslick-theme.cssを<head>内に読み込みます。href="slick-theme.css">こちらも他サンプルデモと同じく次のHTMLを<body>内に読み込みます。クラス名をslider-forとslider-navに変更します。*/}JavaScriptサンプルデモ4-1のJavaScriptはこちらです。こちらも他サンプルデモと同じく次のコードを</body>直前に読み込みます。true});});</script>サンプルデモ4-2のJavaScriptはこちらです。サンプルデモ4-1と同じく次のコードを</body>直前に読み込みます。1000});});</script>Resultサンプルデモ4-1・サンプルデモ4-2はこちらHTMLのクラス名をslider-forとslider-navに変更することを忘れずに。サンプルデモ4-1とサンプルデモ4-2のHTMLとCSSは共通です。slickでできるカルーセルスライダーは大体こんな感じですね。あとはスライドする画像の枚数を変えたり、自動でスクロールさせるなどオプションを変更して色々と試してみてください。Webデザインラボ中の人NYのデザイン学校でグラフィックデザインを学んだ後、同じくNYにあるWeb制作会社にてインターンからWebデザイナーへ。同時期に米国永住権(グリーンカード)を取得。その後某旅行会社系のWebクリエーター兼社内インフラ担として働いた後、結婚を機に約12年に渡るアメリカ生活を終え日本に帰国。日本では某携帯キャリアの社内Webクリエーターとして勤務。Web系に携わる前はホノルル空港でGreeterとして働いていた経験や、アメリカ国内の衣料品を中心としたアパレル系のバイヤー経験もあり。趣味はお酒を飲みながらの家でまったり音楽鑑賞とアウトドア系全般。最近は自転車にもハマってます。更新情報はTwitterかFacebookで配信してるのでフォローして確認してみて。