2015.7自社が運営するサイト構築にレスポンシブウェブデザイン対応のカルーセル、Slickを設置してみました。need(ずっと欲しかった究極のカルーセル)とあるので、他にもいろいろ使ってきましたが、今後はこれ1本でいけるかな?ネットショップなど、商品画像を1つ1つスライドさせてユーザーへアピールしたいですよね?そんな時、簡単に設置できて、いろいな効果も簡単に実装できるslickのカルーセルは大変使い勝手がよく、広告宣伝効果も高いと思います。スマホでの閲覧が爆発的に増える中、レスポンシブデザインに対応している事は今やマストと言えるでしょう。ネットショップでよく使うカルーセルの見せ方として、複数画像を1枚1枚送り、なおかつ、レスポンシブ対応で画面幅に合わせて表示枚数を変える設定をご紹介します。jQueryを利用する際に気をつけたいのは、そのスクリプトが日々進化している事です。検索で使い方などを調べても、その記事を作成した際のガイドなので、その後に参照するjQueryなどが変わっていたり、紹介されているスクリプトがダウンロードされているものと適合しないで動かない事などがあります。本家のガイドは本来きちんと参照したほうがいいと思います。今回紹介しているバージョンは2015年7月17日、1.5.6です。ダウンロードした時点でのjQueryの指定バージョンさえ合っていれば大丈夫かと思います。jQueryの読み込みはダウンロード時に本家に紹介されているCDNで読み込めば簡単、確実です。いう方の参考になるように、なるべくわかりやすくご紹介します。Zip」というボタンから最新スクリプトがダウンロードできます)大まかな手順1.自分のPCにSlickのファイルをダウンロードする。(上記参照)2.必要なファイルをFTP等でウェブサイトへアップロードする。3.ウェブサイトにコードを書き込む。<1.自分のPCにSlickのファイルをダウンロードする。>・ダウンロードして解凍すると複数のファイルが含まれています。cssやjs本体が含まれるSlickフォルダの他、READMEファイル(使い方説明やライセンス情報)、Jsonファイルなどです。ライセンスはMITです。<2.必要なファイルをFTP等でウェブサイトへアップロードする。>・ウェブサイトにダウンロードしたファイルのうち、以下のものをアップロードします。その際、Slickというフォルダを作成して一緒にいれておけばわかりやすいでしょう。どこへアップロードしたかを覚えておきます。トップページに設置するならば、トップページがある階層にフォルダを作成して入れるといいでしょう。(js本体)slickの機能を変更するには、slick.jsが必要となります。今回はslick.min.jsで大丈夫です。正常に動かす為にはjQueryのライブラリが必要ですが、それはCDNを利用して読み込みますのでアップするのはこれだけです。これらのファイルをどこへアップしたか、メモしておきましょう。(※CDN...自分のウェブサイトへファイルをアップせず、配布先から直接ファイルを読み込んでくるコンテンツデリバリーシステムの事)スタイルシートは.cssのファイルなのでお間違いないように。Sassに対応しているので、同名で.scssファイルが含まれています。今回ご紹介する例では、トップページの階層にSlickというフォルダを作成し、そこに入れる事とします。Slickを設置するのは、トップページという事にします。<3.ウェブサイトにコードを書き込む。>ヘッダーに設置するコードHTMLヘッダーの中(<head>〜</head>の間)に以下のコードを入れます。コードはヘッダーの一番最後の方に入れるといいかと思います。今回は、slickというフォルダに入れて同階層に置いているので、スタイルシートのパスは以下のようになります。href="slick/slick-theme.css"/>スライドさせる画像部分のコード次に表示する画像を指定する部分ですが、以下のようにdiv要素で囲みます。全体をdiv要素で囲み任意のクラス名をつけます。その中の一つ一つの画像もdivで囲みます。つけたクラス名は後ほど使うのでメモしておきましょう。画像をクリックすると、その関連ページに飛ばしたいので、リンクをしてあります。リンクが無くても問題ありません。/></a></div></div>今回はリンクを貼った画像を表示ですが、画像と共にテキストを表示したり、動画などのコンテンツも入れられるようです。画像の枚数に制限は無いようです。クラスをつけた要素はdivですが、他のものに変更する事もできます。その場合は、オプションで指定する必要があります。js部分のコードjsを読み込み、動かす関数部分を入れます。挿入位置は最後の</body>直前にいれます。以下のコードを書く順も大切です。jQueryを読み込み、slickのjsを読み込み、slickを動かす関数を書きましょう。オプションを何も指定しない場合は、以下のようになります。これを設置して、今までの過程に間違いが無いか、動くかどうかを確認するといいかと思います。動かない場合は、jsのパスに間違いがないか、スペルなど異なっていないかなどをチェックしてみましょう。type="text/javascript">$(document).ready(function(){$('.top-slider').slick({});});</script>上の2行は、jqueryを配布先から直接読み込んでいるCDN部分になります。最初に申し上げましたが、ここでの参照はファイルをダウンロードした時点で本家に紹介されているものを使うのがいいかと思います。jQueryの部分のコードを拾ってきましょう。置いたパスを正確に指定します。今回はslickフォルダに入れ、同じ階層に置いているのでこうなります。とある部分は、ご自分でつけたdivのクラス名になります。オプションの設置オプションを指定するには、上記コードの空白行に入れていきます。値という形で入れていきます。最後の半角カンマを忘れずに。最後は半角カンマは要りません。ここいらへん、ちょっと間違っても動きませんのでご注意を。レスポンシブ対応のウェブサイトに設置し、一般的なオプションを指定した場合は、以下のようなコードになります。1}}]});});</script>オプションの説明です。自動再生にしています。カルーセル下に表示されるドット。どの画像が表示されているかわかる。1,動いて変わる画像の数(デフォルトは1)上記の設定ですと、1画面に5枚表示になり、1枚毎にずれて表示されていきます。この指定のままですと、パソコン画面でも5枚表示、スマホ画面でも5枚表示になります。画面サイズに合わせて全体のサイズも変わってくれます。スマホで5枚は見にくい。そこで、レスポンシブのオプションを設定します。レスポンシブウェブデザインに関する上記設定の説明です。上の場合、画面サイズが最小〜480pxまでの場合1枚表示、1枚づつ送り481px〜600pxまでの場合2枚表示、1枚づつ送り601px〜1024pxまでの場合3枚表示、1枚づつ送り1025px以上の場合5枚表示、1枚づつ送り全部1枚づつ送りになってますが、表示枚数毎に変えてもいいですね。1025px以上が5枚になるのは、レスポンシブの設定の前にslideToShowオプションで5のデフォルト指定をしているからです。その他、オプションは恐れ入りますが本家サイトを参照ください。時間がある時に追記したいと思います。最後に...実際にネットショップで使うためには、CSSでカラーやサイズ等、さらに調整が必要でしょう。スライド下のドットなどはデフォルトですと、黒のドットなので、背景が黒の場合など見えません。笑)その場合、CSSで該当箇所を変更していく事になります。時間がとれれば後日、CSS等のカスタマイズもご紹介したいと思います。