質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Q&A

0回答

1298閲覧

Slider Proのloop時、1枚目の画像が一瞬消える件(iPhone/Safari)

chellll37

総合スコア7

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

0グッド

0クリップ

投稿2018/06/14 08:54

前提・実現したいこと

jQueryプラグインのSlider Proを使用してキャプションが遅れて出てくるタイプのスライダーを実装しています。
640pxをブレイクポイントに、画像が切り替わるような設定です。
http://bqworks.com/slider-pro/

iPhoneのSafariで見たときのみ、ループして1枚目に戻ってきたときの画像が一瞬消えてしまいます。
※本家サイトのスライダーも同様

この画像が一瞬消える現象を、現状の設定は変えないまま解消したいです。
【現状の設定】
・ループ
・キャプションが遅れて表示される
・ブレイクポイントで画像切替
・幅100%表示
・スライド方向はnormalのまま
などなど…

該当のソースコード

便宜上3枚のみにしていますが、実際は6枚程度のスライダーです。

html

1<div id="slider-pro"> 2 <div class="sp-slides"> 3 <div class="sp-slide"> 4 <p><img src="images/slide01.jpg" alt="1枚目" data-small="images/sp_slide01.jpg"></p> 5 <p class="sp-layer" data-position="centerCenter" data-show-transition="down" data-show-delay="300" data-hide-transition="up"><img src="images/slide01_catch.png" alt="1枚目キャプション"></p> 6 </div> 7 <div class="sp-slide"> 8 <p><img src="images/slide02.jpg" alt="2枚目" data-small="images/sp_slide02.jpg"></p> 9 <p class="sp-layer" data-position="centerCenter" data-show-transition="down" data-show-delay="300" data-hide-transition="up"><img src="images/slide02_catch.png" alt="2枚目キャプション"></p> 10 </div> 11 <div class="sp-slide"> 12 <p><img src="images/slide03.jpg" alt="3枚目" data-small="images/sp_slide03.jpg"></p> 13 <p class="sp-layer" data-position="centerCenter" data-show-transition="down" data-show-delay="300" data-hide-transition="up"><img src="images/slide03_catch.png" alt="3枚目キャプション"></p> 14 </div> 15 </div> 16</div>

js

1$(window).load(function() { 2 $('#slider-pro').sliderPro({ 3 width: '100%',//横幅 4 arrows: false,//左右の矢印 5 buttons: true,//ナビゲーションボタン 6 slideDistance:0,//スライド同士の距離 7 visibleSize: '100%',//前後のスライドを表示 8 autoScaleLayers:false,//キャプションの自動変形 9 waitForLayers: true,//キャプションのアニメーションが終了してからスライドするか 10 aspectRatio: 1.964,//スライドのアスペクト比 11 responsive: true, 12 smallSize: 640, 13 breakpoints: { 14 640: {//表示方法を変えるサイズ 15 aspectRatio: 0.8 16 } 17 } 18 }); 19});

試したこと

【現象が発生する場合】
・オプション「fadeCaption」をfalseに設定した場合

【現象が発生しない場合】
・キャプションがない場合
・オプション「autoplayDirection」をbackwardsに設定した場合

自分で試せたのはこれくらいです。

補足情報(FW/ツールのバージョンなど)

iPhone 6s/Safari ver11.0 で現象を確認
iPhone X/Safari ver11.0 で現象を確認

一言

質問が初めてで足りない情報等ありましたら申し訳ありません。
その際は一言コメントいただければと思います。
お力添えのほどよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問