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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2535閲覧

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

RT2

総合スコア18

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/12/07 04:54

編集2021/01/20 06:34

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に問題なく、htmlのファイルをサーバーにあげたあと、実機でPCで確認しても、navigationボタンも、paginationボタンも全く問題ありません。また実機のPCで検証を使って、スマホでの反映のされかたを確認しても上記の両ボタンはちゃんと出てきます(ローカルでは画像が多少縮小されてnavigationボタンとpaginationボタンがbackgroundが黒い画面に白いボタンで出てくるので見やすくなるという違いはあります)。
私や知人のスマホで確認すると、1枚目と4,5枚目のimgにはimgにかぶってnavibgationとpaginationボタンが現れますが、2,3,6枚目の画像には両ボタンが消えてしまします。さらに、スクロールして、1枚目に戻ると、最初には映っていた両ボタンは消えています(4,5枚目は2周目でもボタンはあり、ボタンが現れていない画像もボタンの箇所をタッチすると、スクロールの反応はします)。
両ボタンをどの画像でも見えるようにするのに、苦労しているので、ご助力いただきたく思います。

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

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

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

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

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

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

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

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

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

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

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

2021/01/20 12:05

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

回答1

0

自己解決

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

投稿2021/01/22 01:34

編集2021/01/22 01:36
RT2

総合スコア18

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問