swiperの実装にて,スマホにてnavigationとpaginationボタンがスライドの画像によって、現れる画像と現れない画像がでてきてしまう。

html
1<!DOCTYPE html>
2<html>
3
4  <head>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
8  </head>
9  <body>
10        <div class="swiper-container" style="height:100%;">
11          <div class="swiper-wrapper" style="text-align:center;">
12            <div class="swiper-slide"><img src="in.jpg" alt="la salute"></div>
13            <div class="swiper-slide"><img src="pizza.jpg" alt="la salute"></div>
14            <div class="swiper-slide"><img src="me.jpg" alt="la salute"></div>
15            <div class="swiper-slide"><img src="bagna.jpg" alt="la salute"></div>
16            <div class="swiper-slide"><img src="desk.jpg" alt="la salute"></div>
17            <div class="swiper-slide"><img src="out.jpg" alt="la salute"></div>
18          </div>
19          <div class="swiper-pagination"></div>
20          <div class="swiper-button-prev" style="color:white;"></div>
21          <div class="swiper-button-next" style="color:white;"></div>
22        </div>
23   <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
24   <script type="text/javascript>
25    $(function(){
26    var mySwiper = new Swiper ('.swiper-container', {
27      loop: true,
28      effect: 'cube',
29      pagination: {
30        el: '.swiper-pagination',
31        clickable: true,
32      },
33      navigation: {
34        nextEl: '.swiper-button-next',
35        prevEl: '.swiper-button-prev',
36        hideOnClick: true,
37      },
38      scrollbar: {
39        el: '.swiper-scrollbar',
40      },
41    });
42    });
43    </script>
44   </body>
45
46</html>

現象としましては、ローカルでの検証では、全くswiperに問題なく、ｈｔｍｌのファイルをサーバーにあげたあと、実機でＰＣで確認しても、navigationボタンも、paginationボタンも全く問題ありません。また実機のＰＣで検証を使って、スマホでの反映のされかたを確認しても上記の両ボタンはちゃんと出てきます（ローカルでは画像が多少縮小されてnavigationボタンとpaginationボタンがbackgroundが黒い画面に白いボタンで出てくるので見やすくなるという違いはあります）。
私や知人のスマホで確認すると、1枚目と４，５枚目のimgにはimgにかぶってnavibgationとpaginationボタンが現れますが、２，３，６枚目の画像には両ボタンが消えてしまします。さらに、スクロールして、1枚目に戻ると、最初には映っていた両ボタンは消えています（４，５枚目は2周目でもボタンはあり、ボタンが現れていない画像もボタンの箇所をタッチすると、スクロールの反応はします）。
両ボタンをどの画像でも見えるようにするのに、苦労しているので、ご助力いただきたく思います。

試したことは、cssが原因かと思い、display:block;とvisibility:visible;を足したり、navigationのオプションにhideOnClick,を足してみましたが、変わりません。
サーバーにアップしたファイルに漏れがないかも確認しました。

アップしてから、少し時間が立つ必要もあるのでしょうか。意味あるかはわかりませんが、検索パフォーマンスでサイトマップも追加しています。キャッシュも削除しています。

ローカルと、実機のPCでの検証にてPCサイズとスマホサイズでは問題がない（画像が縮小されて、白色の両ボタンがバックグラウンドが黒色の画面で見えやすくなっている）のですが、実機のスマホではうまく表示されません（両ボタンは画像に重なって表示されます）。

何卒、宜しくお願いします。

Lhankor_Mhy

2020/12/07 05:18

「私や知人のスマホ」のOSとブラウザを教えてください。

RT2

2020/12/07 06:26

iphoneXとiphone8です。すみません。ブラウザの記載をしていなかったです。 IEは使っていません。CHROMEとsafariです。よろしく　お願いいたします。

Lhankor_Mhy

2020/12/07 06:31

ということは、Andriodで問題が出るかどうかは未確認、ということですか。把握しました。

RT2

2021/01/20 06:35

把握したその後はいかがでしょうか。宜しくお願いします。

Lhankor_Mhy

2021/01/20 11:25

進展はありません。

RT2

2021/01/20 12:05

Andriodで作動仮にしないとして、iosだけでも、まずはいいのですが。

行動規範の内容に同意します

回答1件

自己解決

effect: cube,を削除したら、effect効果はなくなりましたが、正常に稼働（navigationボタンもpaginaitonボタンもスライドしても常に表示されるようになった）しました。
とりあえずは見た目として不具合がない方がいいので、今後検証していきますが、
swiperの不具合なのでしょうか。どなたか分かる方いましたら、アドバイスをお願いしたいです。

投稿2021/01/22 01:34

編集2021/01/22 01:36

RT2

総合スコア18