【jsステップアップ】[1]拡大機能付スライダー作成手順とサンプル
初心者の方向けに作成手順や説明等していきます
実践で役立つjs実装サンプル。
として初心者の方に向けて各所適宜解説等
はさみつつ不定期で少しずづ連載(予定)で
更新していこうと思います。
多分対象としては、
html/css/jsの基本は理解してwebページが作れる。
javascriptもjqueryとかのプラグイン利用してある程度のコンテンツや機能は作れる。
自分でも多少は書けてエラーとかもみれますよ、という方向けになると思います。
とりあえずサクッと入れて動く便利なプラグイン探してるんだけど。
って方だと本記事とは方向性が違うかもしれません。
本連載に関して
本連載では、初心者向けに各所の解説をしていますが、
一歩踏み込んだ実践的な内容にはなっていると思います。
※フロントエンド(HTML/CSS/JavaScript)の基礎知識は必須になります。
【拡大機能付きスライダー】javascript実装サンプルの連載一覧
- [1]初心者の方向けに作成手順や説明等していきます
- [2]ドラッグ値/スワイプ値を取得する
- [3]スライダーを作成する
- [4]モーダルを作成する
- [5]拡大(ズーム)機能を作成する
- [6]拡大(ズーム)機能を作成する②
関連記事
少し話がそれますが、以前書いた記事の続きのつもりです。
商品画像の詳細/拡大表示のjs実装サンプル(ECサイトとかでよくあるやつ)
拡大機能付きスライダー実装の完成目標サンプルと概要
とりあえずシリーズ第一回目(続くかは未定)として。
ECサイト等でよく見かけるかと思われる拡大機能付きのスライダーの作成が今回の目標です。
codepenのサンプル
上記が完成目標です。 細かくブラウザチェックとかはしてませんがPC/SP対応です。
※CodePenの埋め込みだと、SPの動作が微妙かもしれないので
説明に関してはPCメインで説明していきます。
コード自体はSPでも動作可能な様にしているハズなので
要所要所でスマホに関しての説明もいれる形にします。
機能としては大きく分けると下記の３つになると思います。
(1)スライダー機能
prev/nextボタンのクリック/タップでスライド
+PCの場合画像マウスドラッグでスライド
+SPの場合スワイプでスライド
(2)モーダル機能
スライダーで表示中の画像をズームアイコンクリック(タップ)でモーダル表示
closeアイコンクリックで閉じる
(3)ズーム機能
PCの場合マウススクロールで拡大/縮小 + ドラッグで移動
SPの場合ピンチイン・ピンチアウトで拡大/縮小 + スワイプで移動
※今回のでいうと多分メインの機能かなと思っています。
なのですが、初心者向けとはいいつつ多分上記2つの内容に比べると
多少複雑な内容になってしまいそうかなと思います。
試す環境やサンプルのそれぞれのコードの説明について
環境
お手元の環境の準備等に関しては特に説明とか指定はしません、
多分サンプルと同じcodepenで試すのが
一番手軽で分かりやすいかなとは思うのでおすすめですが、
各々お好きな環境でお試しください。
※CodePenスマホだと埋め込みとかが影響して？動作微妙かもしれないです。
リソースファイル
上部サンプルもですが、
各コード(html/css/js)の該当部分の説明等も
基本的に下記で説明していきます。
html(html※そのまま)
css(scss)
javascript(babel)
リソースファイルっていう言い方であっているのかなんともですが、まぁアレです。
htmlに関してはそのままです。
sassやbabel自体に関しては、特別ここで説明する事は省きますが、
わからないよって方は
codepenだと”View Compiled”ボタン押すと
コンパイルされた素のコードを確認できます。
javascript(babel)について
多分説明の主な部分がjavascriptの細かい部分になると思います。
babelは多分上記の”View Compiled”でのコンパイルは
codepen上のデータで確認はしてませんが、
古めのIEとかでエラーでそうな気もするので
もし必要があったら下記とか利用の上
適宜プリセットとか選んでゴニョゴニョすれば動くかもしれません。
プラグインは利用せずコンテンツ作成する
いずれの機能もよく見かけるのでjquery等の便利なプラグインも多くあると思いますが、
今回はプラグインは利用せず自力のjavascriptで作成していきます。
細かいディテールもしっかり作り込む必要のある
凝ったコンテンツ等だと、プラグイン同士の相性だったりもあり
自分で組んでしまった方が全体の把握がしやすくて、やりやすい事も多いと思っています。
そういう場面に出くわした時に仕組みや考え方を知識として持っておいて損はないのでは？
というような内容を所々説明等を入れて少しずつ記事にしてみるつもりです。
あと最近だとVueとかReactとかってフレームワークが主流?のような印象で、
当然使えるに越した事はないとは思うのですが、この辺りは結構移り変わりも激しめなので
プラグインやフレームワーク等を利用せず各所細々とjavascript(css/html)を書いていく事で、
理解出来てしまえればjavascript以外にも色々応用の効く内容になっている、と思います。
プラグインの利用について
当然かと思いますが、僕個人も仕事でプラグインはよく利用します。
クライアントが求めている物がプラグイン入れて済む物でならば
仕事やる側も早く作成できて発注側も単価抑えられると思うので
プラグインでやってしまった方がいいです。
軽く注意点というかお断り
一応僕個人はフリーの受注でWebのコンテンツ作ったりで
日銭を稼いでる人間なので制作のプロとはいっていいかなとは
思っていますが専門家かと問われるとそれは何とも微妙だなって
感じの知識と技術だと思ってるので、
サンプルとか載せて説明していきますっていっても
結構我流(オレオレコード)の部分も多いと思います。
あと説明に関しては素人なので分かりにくい所や
英語の使い方間違ってるとかスペルミスってるとか、
適当な内容も多いかもしれないです。
勝手に勝手な説明しているだけなので、
不明な部分は適宜google先生と相談しながら
確認してもらえれば良いかと思います。
とう言う訳で誤った事や、もっといいやり方あるよって内容もあると思いますが
あくまでこうゆう方法があってその通りやったら
多分出来るよと思うよっていう参考程度に思っていただけましたら幸いです。
【拡大機能付きスライダー】javascript実装サンプル次回について
次回はいきなり細かいですがドラッグ値/スワイプ値の取得と利用について書いていきたいと思います。