アプリ魂

はじめてのプログラミング生活

【132日目】JavaScriptで簡単なスライダーを作ってみた

f:id:seitokaii:20170202073658p:plain

@appdamacyですペコリ(o_ _)o))

今回は念願のスライダーを作ってみました!

スライダーに関しては
プラグインを使ったことがあっても
どうやって動いてるのかは全く理解できず(=ω=;)

GitHubにあがってるコードをたくさん読んで
スライダーに必要なポイントを学ばせてもらいました

そのなかで納得いくというか
現時点で理解できる範囲の書き方で作りました

ゼロから書くと全体が把握できるので
ここどうやって動いてるの?みたいな
気持ち悪さがなくてすっきりしますね!

簡単な仕組みでスライダーを作れた

コンテンツを横一列にだーっと並べて
部分的に表示する方法で作りました!

f:id:seitokaii:20170202081946p:plain

こんな感じ!
仕組みはとっても簡単だけど
なるほどなーと思いました(=ω=;)
ポイントになったCSSはこれだけです

あとはリンクをクリックしたときに
並んだ画像全体を横にスライドさせてあげるだけで
スライダーとしての機能を実装できました!

f:id:seitokaii:20170202074834g:plain

最後にCSSを書いてこんな感じで完成です(o^^)o

以下はコード全文

HTML

CSS

JS

あらためて自分で見返すと
前に戻るボタンと次に進むボタンの
コードの書き方はかなり怪しい(ノ△・。)

もっと短く効率よく書けるはず・・・
だけどこの前JSを書いたときと比べたら
成長できたんじゃないかなーと思います!

2016 APPDAMACY