読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

jQueryとCSSで作るスライド画像

CSS jQuery 制作

どうも!chuckです。

いま会社でスマホサイトの制作を行っています。その中で画像のスライドを作成しているので、ここでも手法を記録しておきます。

 

ちなみに、まだスワイプ操作に対応しておらず動きもショボイですヽ(´Д`;)ノアゥア… 挙動の洗練化はまた後日!今回はベーシックな機能だけを書いていきます。

 

 

完成品

こちら。左右のボタンをクリックすると画像が切り替わりますヽ(=´▽`=)ノ

f:id:chuck0523:20150711162610p:plain

http://chuck0523.github.io/front-end-coding/swipeImagesPractise/photoSlider2.html

 

サイズ感のみ、スマホ対応しました。

f:id:chuck0523:20150711162645p:plain

 

 

技術的な話

まずコードがこちら。

gist0757f6eb7b54fce83edf

 

肝となるHTMLはこの部分。

f:id:chuck0523:20150711162831p:plain

この<ul />に<li />を入れていきます。HTMLの要素ごとスライドさせているので、画像でなくともOKです。

 

位置が固定された大枠の<div>は、画像を表示するためのフレームの役割を果たしています。その中を横に伸びた<ul>が左右にスライドしていく感じです。

<ul>の中の<li>は単純にfloat : leftで横向きに格納されているだけなので、難しいことはしていません。

 

あとはスクリプトの方で、画像1枚のサイズ分だけ、左右にスライドさせます。この時に操作するのが<ul>のleftプロパティです。

 

次回への課題

もっと動きをなめらかにして、スマホでのスワイプにも対応させます!では(`・ω・´)ゞ

 

参考にしたサイト様

black-flag.net

ロジックはほとんどこのサイト様から学びました。

 

www.monox.jp

今回は画面のリサイズに応じて画像のサイズも動的に変えました。その縦横比の参考にさせていただきました。

 

satohmsys.info

今回の制作とは全然関係ないんですが、せっかくなのでfont-familyをしていてみました笑