芝生の手入れ芝生の道具マイホームブログトップマイホームブログWeb【プラグイン不要!】レスポンシブWebデザインに対応したカルーセルjsを自作してみた【プラグイン不要!】レスポンシブWebデザインに対応したカルーセルjsを自作してみたWeb2017年6月23日レスポンシブWebデザインに対応したカルーセルjsを自作してみました。プラグインを使えば手っ取り早く実装できるカルーセルですが、要件によっては不要な機能も多々あり、機能変更などに柔軟に対応できないケースもあることから、自作できるに越したことはありません。本記事では私が自作したレスポンシブWebデザイン対応カルーセルjsをご紹介させていただきたいと思います。本記事でご紹介させていただくカルーセルjsには、以下の機能を実装しました。基本的に必要となってくる機能は大体盛り込んでいるかと思います。});※jQueryを読み込んでいる場合のスクリプトとなります解説かなり長くなってしまいましたが。頑張って解説してみたいと思います。スクリプトにもなるべく丁寧にコメントを記載していますので、あわせてご参考にしてください。変数「$speed」と「$interval」にそれぞれアニメーションのスピードと自動再生されるまでの秒数を指定しています。次の変数「$currentNum」では初期値を1とし、自動再生やインジケーター、「次」「前」を操作によってこの値を増減し、現在値や移動幅を示すのに使用しています。次に、あらかじめ頻繁に使用するセレクタやcss設定に必要な画像の幅、要素の数、画像を括っている.itemの幅を変数に格納しておきます。ここから処理実行($ViewContents.each~)に入ります。要素が1個以上ある場合のみインジケーターの生成や前後のループ用クローン生成を行います。あわせてここに自動再生用の関数も書いておきます。1個の場合はこれらを行わず、不要な要素をremove()で取り除いています。次に、「次」「前」のクリック時の処理を記述しています。自動再生と競合しないようclearIntervalで一旦再生タイマーをクリアします。左の場合はクリック毎に$currentNumの値を減らし、右クリックの場合は増やします。この値を使ってカレント用class(.current)を付け替えたり、アニメーション移動する位置の計算に使います。アニメーション完了時に最後もしくは最初の要素(.clone-l、.clone-f)に到達していた場合は同じ要素の位置にずらし、かつカレント用classを付け替えて$curentNumの値も元に戻します。最後のアイテム(.clone-f)到達したらleftの値を.clone-lの後ろに移動させ、かつその要素に.currentを付け替え、$currentNumの値を1(初期値)に戻す、といった感じです。最後にautoLoad()で自動再生を再スタートさせます。次はインジケーターの処理です。clearIntervalで自動再生タイマーをクリアします。クリックしたインジケーターのインデックス番号を参照し、$currentNumを更新します。$currentNum」と計算してアニメーションさせます。アニメーション完了時の処理は必要ありません。「次」「前」と同じように、最後にautoLoad()で自動再生を再スタートさせます。次にリサイズ対応です。以前ご紹介した記事の応用で、ウインドウリサイズが終わった時にだけ処理を実行します。最初に設定したcssリセットして、改めて幅を取得し設定し直します。2)するのがポイントです。ここまで来たらあと少しです。マウスオーバー時に自動再生されないようclearIntervalします。function~にはマウスオーバーが外れた際自動再生が再スタートされるよう、autoLoad();を記述しておきます。最後にフリック対応です。恥ずかしながらあまりここの処理は書いたことがなく、一番四苦八苦しました。タッチ開始、タッチ移動、タッチ終了それぞれのイベントで処理を行います。タッチ開始(touchstart~)では、タッチした場所のX座標とY座標を取得します。ここでclearIntervalで自動再生タイマーをクリアします。タッチ移動(touchmove~)ではまず変数$moveXと$moveYに移動先のX座標とY座標を格納します。縦スクロール対応の記述はおまじないのようなものなので、あまり深く考えなくてよいです。書いておけば斜めにフリックしてもちゃんと動くようになります。$(this).css~の記述でフリックした分カルーセルがグリグリ動くようになります。タッチ終了(touchend~)では移動した距離を変数$diffに格納し、50px以上であれば次もしくは前の画像へアニメーションするようにしています。50px以下の場合は元の位置に戻るようアニメーションします。この50pxはお好みで変えてもOKです。デモ実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。レスポンシブWebデザインに対応したカルーセルjsを自作してみたまとめプラグインを使用したものや、もっと簡単なカルーセルはこれまでも実装したことはありますが、ここまで機能を盛り込んだカルーセルjsをフルスクラッチで自作したのは初めてでしたので、とても勉強になりました。基本的な機能は大体網羅できたと思うので、手前味噌ですが結構実用的なものが作れたと思います。機能毎に処理はまとめたので、不要なものがあれば適宜記述を削除することで必要最小限のスクリプトにすることも可能です。時間が無い場合はプラグインに頼るのもアリかと思いますが、自作できるといざ修正やメンテナンスを行う際とてもやりやすくなりますし、マークアップも自由自在に操れるので、結果よいものが作れると思います。レスポンシブWebデザインのカルーセルjsを自作される際は、ぜひ本記事をご参考にしていただければ幸いです。追記(2017年6月28日)ご本記事にてご紹介させていただいたレスポンシブWebデザインに対応したカルーセルjsを、プラグイン化してみました。手前味噌ですがかなり実用的なものに仕上がったと思いますので、どうぞあわせてお読みください。【実用的!】レスポンシブWebデザインに対応したカルーセルjsをjQueryプラグイン化してみた追記(2017年7月5日)さらに、jsonファイルのデータ読み込みに対応したものも作ってみました。あわせてお読みください。追記(2017年7月14日)本記事のスクリプトをさらに改良し、クロスドメイン対応しました。あわせてお読みください。ため、即時には反映されません。住宅ローン2019年5月7日さらに見る記事を書いている人フォローするRSSを購読するWebデザイナー/フロントエンド・エンジニアのMasaです。独学でWebデザインを勉強後Web業界へ就職し、今の会社に勤めて12年目になりました。2016年4月にマイホームを購入し、休日は芝生いじりと育児に励んでいます。