はてなブログ用カルーセル imzCarousel Ver.1.1.0 旧バージョン iPhone対応&バグフィックス版
障害発生の経緯
先日、「はてなブログ用カルーセル仕様スライダー「imzCarousel」jQueryなし」を公開したのですが、あトんさんにコメント欄でご指摘をいただき、一部モバイルで問題が発生していたようです。
「ようです」と言いますのも、ご指摘の障害が手元の iPhone等で確認できず、ふと思い立ち、引き出しの奥で死んでいた iPhone4を充電し立ち上げてみましたら、そもそも全くスライダーになっていなく、画像が下に並んでいました（あちゃ！）。
で、あるいは問題はこれか！？と気づきましたのが、width: max-content の値指定 max-content が旧バージョンの iPhone（ブラウザ？）に対応していないのではないかということです。
もう少し説明しますと、スライダーをカルーセルにする方法をあれやこれややってみたのですが、結局よく使われている、画像を float: left で全て横並びにし、最後までいったら最初の画像を表示するしかないということで、画像を括っている、今回の場合ですと carousel-inner の横幅をこんな便利な設定値があるということで max-content を使ってしまったのでがいけませんでした。
結局、画像サイズ×スライド枚数を Javascriptでインライン指定することにしました。
旧バージョン iPhone対応&バグフィックス版
下記記事内の Javascript & CSS が修正済みです。次のバグフィックスも含みます。
- Dots ナビを表示していなくても関数を呼び出してしまう問題
ダウンロード
または、GitHubからダウンロードして下さい。