6minスポンサーリンクSHAREツイートシェアはてブLINEPocketツイートシェアはてブLINEPocketAuthorトッド(Todd)javascriptは難しい。”スライド機能”実装したい。優しさなのか?(テキストが青から赤に変えられる。)とか(console.log(”こんにちは”))でコンソールに出力できました。それ、面白い?分かるよ。入門的な説明をしているんだもの。それぐらいじゃないと理解できないでしょ?・・・てきな。興味、失せません?だったら、もっともらしいモノを作って満足しよう!と思い、憧れの”スライド機能”を実装しました。ここでは、噛み砕いて『どうやって”スライド機能”を実装したか?』について書いていきたいと思います。いったモノを作れるのか?サンプルを用意しました。実装することが出来ます。?良い感じでしょ?サンプルなので、テキストをスライドさせている簡単なモノですが、画像やリンクを埋め込むこともできます。このスライダーを作るのに、「Swiper」というjavascriptライブラリーを使用しました。Swiperすごく簡単に実装できるので興味のある人は試してみてよ。「Swiper」の導入・実装までの流れここでは、ファイルをダウンロードせずにCDN経由で導入・実装する方法を紹介しようと思います。『Swiper』の公式サイトへアクセスします。Startedを選択します。そこに書かれているCDNコードを自サイトのhead~/head間にコピペします。別途、1つはhead内。一方はbody内に同じくコピペします。「Swiper」には、豊富なデモがあります。そこから好みのレイアウトを見つけます。STEP.3コピペする好みのレイアウトが見つかったら、そこからソースコードを見ることが出来るので、実装したい箇所へサンプルと同じように記述していきます。STEP.4オプションを触る主に、これはカスタム機能でコレが分かりやすくて良いところ。STEP.5完成ちゃんと動くか確認する。ここからは、各ステップを詳しく見ていきます。STEP1.導入準備についてまずは、「Swiper」の情報を読み込むことが出来るように、それぞれのソースコードを特定の箇所にコピペしていきます。Startedと記載されているところがあるのでアクセスしてもらうとCDNコードが確認できます。以下で紹介しているソースコードの中に/4.x.x/と書かれているところがあります。その部分は、Swiperの最新バージョンに合わせて書き換える必要があります。2019年5月の時点では、バージョンVr4.5.0なので/4.5.0/と書き換える必要があることを忘れないでください。src="path/to/swiper.min.js"></script>これで導入準備は完了です。STEP2.好みのスライダーを見つける導入準備が終わると、あとは「Swiper」で遊ぶ感覚で楽しむことが出来ます。いうのもデモが豊富に用意されているので、好みの仕様を選択するだけで実装が可能だという事です。Swiperの公式ページにDemosと記載されているところからアクセスすると豊富なサンプルを閲覧することが出来るので見て下さい。DemosSwiperちなみにですが、この記事でサンプルとして紹介している”スライド”の型は『Autoplay』というものです。好みの仕様タイプが決まったら次のステップへ移行します。STEP3.必要なところをコピペする好みの仕様タイプが決まったら、そのデモ画面上に「ソースコード」と書かれた箇所があるのでアクセスします。すると、このスライド仕様がどのようなコードで構成されているのか?を確認することが出来るので、その内必要なところだけ(CSS/HTML/javascript)をコピペします。コピペが出来ていればこの時点でサンプル通りに機能します。STEP4.オプションを触るこの箇所はある程度のjavascript知識が必要でなのでこの記事では触れません。慣れるまではサンプルで遊ぶことをオススメします。CSSを触ってカスタマイズできるところはあるのでまずはそっち方面から攻めましょう。Japaneseをページタイトルと見出しに実装この記事を書いた人トッド(Todd)「ポケサイズム」で気づきを築くをテーマに好きなコト・興味関心に惹かれたテーマに沿った事を書いています。コメントをキャンセルメールアドレスが公開されることはありません。独立したURLでアパレルオンラインストアが持てる【paintory】にてブランド作りました。