IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

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

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

2017/12/1 javascript, はてなプラグイン, はてなブログ

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

  • 障害発生の経緯
  • 旧バージョン iPhone対応&バグフィックス版
  • ダウンロード

障害発生の経緯

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

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

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

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

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

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

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

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

www.imuza.com

ダウンロード

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

github.com

はてなブログ用カルーセル仕様スライダー「imzCarousel」jQueryなし
Windows に Node.js をインストールする
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/05/25

WordPress:リビジョン削除、回数制限

2023/05/10

WordPress:裏技的サイトリニューアル

2023/04/28

XserverへのSSH接続がエラーになってしまった

2023/04/16

正規表現の最短一致でミスる

2023/04/4

WordPress:公開中サイトをサブディレクトリでリニューアルし公開する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ215
  • WebTips109
  • javascript98
  • Joomla!88
  • Wordpress70
  • Windows68
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com