eyemovic inc.

Culture blog会社の活動・働き方

2014.01.17

スライダーで画像がピクピクするときの解決方法

先日、画像が横にスライダーする、よくあるスクリプトを入れているページで、

スライダーと関係ない画像がスライダーの動きに合わせてピクピク動いてしまう

という現象に行き当たりまして、色々試した結果無事解決したのでその方法をまとめたいと思います。

キモはこの2点でした
・中央寄せ
・画像幅

現象が起きる画像と起きない画像があり、その違いを探しているとこの2つにたどり着きました!

このような指定で中央寄せにすることはよくあると思います。
これ自体には問題無いのですが、その中に画像幅が奇数の画像を置く場合、
例えば幅が99pxの画像であれば画像の真ん中は49.5pxですが、
ブラウザ上で0.5pxは再現されないため1pxどちらかにずれます。

そのずれがスライダーの処理の動きと合わせて左右行ったり来たりしてしまうため、
関係ないところなのに連動してピクピクしてしまう、ということが起こってしまっておりました。

なので、手っ取り早い解決方法としては、

画像の切り出し幅は偶数にする。

これでOKでした。

この記事を書いていて、コンテンツ全体の幅が奇数でその中で中央寄せした場合はどうなるのか…という疑問が沸いてきたので、後日検証してエンジニアブログのほうにまとめたいと思います。

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。