どうも！chuckです。
いま会社でスマホサイトの制作を行っています。その中で画像のスライドを作成しているので、ここでも手法を記録しておきます。
ちなみに、まだスワイプ操作に対応しておらず動きもショボイですヽ(´Д`；)ﾉｱｩｱ… 挙動の洗練化はまた後日！今回はベーシックな機能だけを書いていきます。
完成品
こちら。左右のボタンをクリックすると画像が切り替わりますヽ(=´▽`=)ﾉ
http://chuck0523.github.io/front-end-coding/swipeImagesPractise/photoSlider2.html
サイズ感のみ、スマホ対応しました。
技術的な話
まずコードがこちら。
肝となるHTMLはこの部分。
この<ul />に<li />を入れていきます。HTMLの要素ごとスライドさせているので、画像でなくともOKです。
位置が固定された大枠の<div>は、画像を表示するためのフレームの役割を果たしています。その中を横に伸びた<ul>が左右にスライドしていく感じです。
<ul>の中の<li>は単純にfloat : leftで横向きに格納されているだけなので、難しいことはしていません。
あとはスクリプトの方で、画像１枚のサイズ分だけ、左右にスライドさせます。この時に操作するのが<ul>のleftプロパティです。
次回への課題
もっと動きをなめらかにして、スマホでのスワイプにも対応させます！では(｀･ω･´)ゞ
参考にしたサイト様
ロジックはほとんどこのサイト様から学びました。
今回は画面のリサイズに応じて画像のサイズも動的に変えました。その縦横比の参考にさせていただきました。
今回の制作とは全然関係ないんですが、せっかくなのでfont-familyをしていてみました笑