logo

アンサーの画像を使ったカルーセルで、iOS端末だけ画像を左右に送るボタン(矢印・ドット)が表示されません。

iOS(iPhone・iPad)のブラウザが、カルーセルの左右送りボタンやドット表示に使用している比較的新しいCSSの機能に対応していないことが原因でございます。Chrome系のブラウザでは対応しているためボタンやドットが表示されますが、iOS Safariなどでは表示されません。なお、画像部分の横スクロールは一般的な機能を使用しているため、iOS端末でもスワイプによる画像送りは可能でございます。対処は2通りございます。1つは、現状のままとして「画像を左右にスワイプしてご確認ください」といった補足文をあわせてご案内いただく方法です。もう1つは、新しいCSS機能に依存しない形(通常のHTML要素によるボタンとドット)で作り替える方法です。この場合、画像部分はスワイプ可能な状態を維持したまま、左右送りボタンを通常のボタンとして配置し、押されたときにスクリプトで前後の画像へ移動させ、ドットは表示中の画像に合わせて切り替える構成となります。作り替え後は、iOS Safari・Android Chromeなど対象の環境で実機確認をお願いいたします。なお本事象は画像や端末固有の設定によるものではないため、画像を差し替えても解消いたしません。

役に立ちましたか?
解決しない場合はお問い合わせください