はてなブログ用カルーセル imzCarousel Ver.1.1.0 旧バージョン iPhone対応&バグフィックス版

はてなブログ用カルーセル imzCarousel Ver.1.1.0 旧バージョン iPhone対応&バグフィックス版

はてなブログ用カルーセル imzCarousel Ver.1.1.0 旧バージョン iPhone対応&バグフィックス版

01障害発生の経緯

先日、「はてなブログ用カルーセル仕様スライダー「imzCarousel」jQueryなし」を公開したのですが、あトんさんにコメント欄でご指摘をいただき、一部モバイルで問題が発生していたようです。

「ようです」と言いますのも、ご指摘の障害が手元の iPhone等で確認できず、ふと思い立ち、引き出しの奥で死んでいた iPhone4を充電し立ち上げてみましたら、そもそも全くスライダーになっていなく、画像が下に並んでいました(あちゃ!)。

で、あるいは問題はこれか!?と気づきましたのが、width: max-content の値指定 max-content が旧バージョンの iPhone(ブラウザ?)に対応していないのではないかということです。

もう少し説明しますと、スライダーをカルーセルにする方法をあれやこれややってみたのですが、結局よく使われている、画像を float: left で全て横並びにし、最後までいったら最初の画像を表示するしかないということで、画像を括っている、今回の場合ですと carousel-inner の横幅をこんな便利な設定値があるということで max-content を使ってしまったのでがいけませんでした。

結局、画像サイズ×スライド枚数を Javascriptでインライン指定することにしました。

02旧バージョン iPhone対応&バグフィックス版

下記記事内の Javascript & CSS が修正済みです。次のバグフィックスも含みます。

  • Dots ナビを表示していなくても関数を呼び出してしまう問題

www.imuza.com

03ダウンロード

または、GitHubからダウンロードして下さい。

github.com