前提・実現したいこと
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 で現象を確認
一言
質問が初めてで足りない情報等ありましたら申し訳ありません。
その際は一言コメントいただければと思います。
お力添えのほどよろしくお願いいたします。
あなたの回答
tips
プレビュー