BXスライダーが、スマートフォンで動かない 対策は?
ネット情報では、使いやすい.カスタマイズしやすいと高評価のBXスライダー
なんですが、iphone アンドロイドなどスマートフォンでは障害が見られと
サポートへ質問がございましての記事追記です
シリウスをレスポンシブ対応にカスタマイズしているサイトでも
なぜか、タブレット ipadでは正常な作動が確認できているにもかかわらず
iphone アンドロイドなどでは、横スライドすべき隠れ画像がすべて縦並び状態
上記の原因は如何が影響している...
シリウス機能でiphone設定を実行しているが原因でしたが、
詳細はこちらのサイトに追記してございますのでご確認ください
シリウスBXスライダースマホモバイル対応のカスタマイズ
上記リンクページでは、シリウス機能でiphone設定を解除することでの
対処法を解説しておりますが、
ここではiphone設定を実行している場合、スマートフォンではBXスライダーが
動かない状態の解決策ではなく
どうすればよいのかを参照の範囲で解説します
iphone設定を実行している場合、スマートフォンではBXスライダーの
scriptは、反映されない事情があるため....
パソコン ipad タブレットでは表示されるが、スマートフォンサイズで
閲覧の際は、非表示とする手順でございます
パソコンでは表示されるが、スマートフォンで閲覧する際は指定を追加する
ことで反映されます
記事内のBXスライダー用画像コードに、パソコンでのみ表示する
<pcc>~</pcc>要素を外部組み込みます
以下例
<pcc>
<div id="slider">
<div><img src="<% pageDepth %>img/aaa.png" alt="" /></div>
<div><img src="<% pageDepth %>img/1au.png" alt="" /></div>
<div><img src="<% pageDepth %>img/1az.png" alt="" /></div>
<div><img src="<% pageDepth %>img/1air.jpg" alt="" /></div>
<div><img src="<% pageDepth %>img/1ao6.jpg" alt="" /></div>
</div>
</pcc>
上記のように<pcc>の固定要素で囲むことで、パソコンでは表示はされる
<pcc>の固定要素で囲むと、スマートフォン閲覧では自動表示が
できなくなるのです
念のため
スマートフォン閲覧で表示するだけを指定する場合は
<ipc></ipc>要素になります
パソコン スマートフォン閲覧で別な画像や記事を分別表示する際は
<pcc></pcc>
<ipc></ipc>で個別に囲みます
ここまでは、とりあえずの対処法です
至らない解説で申し訳ありません
でも、どうしてもスマホ画面でスライダーを表示させたい方は、
BXスライダー以外のscript搭載をお勧めします
以下は、iphonで作動が確認されております
フェード専用
SIRIUS シリウスサイトにフェードタイプスライド画像設置方法
アメイジングスライダー
シリウスにアメイジングスライダー画像を設置するカスタマイズの方法
スポンサーリンク
ページトップ
BXスライダー(BxSlider)がiphonで動かない?
シリウスBxSlider|BXスライダー完全取り付け詳細設定方法
シリウスカスタマイズTOP
- li要素で作動させるBXスライダー(BxSlider)
- シリウスに導入するBXスライダー(BxSlider)の作動形態で、li要素を使用した際の構築方法を解説いたします。ここでは、div要素の意味合いも含めています。
- BxSliderスライダーにサムネイルギャラリーを設定する方法
- シリウスにBxSliderスライダーを取り付けたなら、次はサムネイルギャラリーを設定する方法です。サイトを訪れた読者に画像演出コンテンツの理解を伝えるカスタマイズかも?
- シリウスBXスライダースマホモバイル対応のカスタマイズ
- シリウスで作成のパソコン表示サイトに加えてスマホモバイル画面でも正常に反映されるjQueryBXスライダー(BxSlider)の指定を追加するカスタマイズのご案内です