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

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

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

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

jQuery

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

HTML

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

Q&A

1回答

958閲覧

Swiper複数使用時にdata-hashを機能させたい

palmarosa

総合スコア10

JavaScript

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

jQuery

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

HTML

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

0グッド

0クリップ

投稿2018/10/20 16:22

編集2022/01/12 10:55

前提・実現したいこと

Swiper.jsを複数使用して探索ゲームのようなものを作ろうとしています。

下記図のようなMAPがあり、A,B,C……それぞれの地点で東西南北の背景画像をSwiperにてスライド表示しています。
A地点で西にあたるスライドをクリックするとC地点のスライドが表示される。
C地点で西にあたるスライドをクリックするとD地点のスライドが表示される。
進めない方角は画像が表示されるだけでクリックは出来ない。
イメージ説明

発生している問題・エラーメッセージ

A→C→Aと移動した時にA地点の東を表示させたいのに西が表示される。
Swiperを複数使っているためdata-hashが上手く機能していないのかな?と思い
swiper-slideにidを追加したら無理やり表示させることは出来たのですが、
何回も移動をしているとやっぱり方角の相対性がおかしくなります。

該当のソースコード

HTML

1 2 <div class="basho-container"> 3 <div class="kakusu" id="hajime"> 4 <a href="#AN" onclick="switchSusumu('bashoA')" ;>入口:北に進む</a> 5 </div> 6 <div class="bashoA kakusu"> 7 <div class="swiper-container bashoAbg"> 8 <div class="swiper-wrapper"> 9 <div class="swiper-slide" data-hash="AN" id="AN">A地点:北</div> 10 <div class="swiper-slide" data-hash="AE" id="AE"> 11 <a href="#BE" onclick="switchSusumu('bashoB')" ;>A地点:東に進む</a> 12 </div> 13 <div class="swiper-slide" data-hash="AS" id="AS">A地点:南</div> 14 <div class="swiper-slide" data-hash="AW" id="AW"> 15 <a href="#CW" onclick="switchSusumu('bashoC')" ;>A地点:西に進む</a> 16 </div> 17 </div> 18 <!-- Add Arrows --> 19 <div class="swiper-button-next"></div> 20 <div class="swiper-button-prev"></div> 21 </div> 22 </div> 23 <div class="bashoB kakusu"> 24 <div class="swiper-container bashoBbg"> 25 <div class="swiper-wrapper"> 26 <div class="swiper-slide" data-hash="BN" id="BN">B地点:北</div> 27 <div class="swiper-slide" data-hash="BE" id="BE">B地点:東</div> 28 <div class="swiper-slide" data-hash="BS" id="BS">B地点:南</div> 29 <div class="swiper-slide" data-hash="BW" id="BW"> 30 <a href="#AW" onclick="switchSusumu('bashoA')" ;>B地点:西に進む</a> 31 </div> 32 </div> 33 <!-- Add Arrows --> 34 <div class="swiper-button-next"></div> 35 <div class="swiper-button-prev"></div> 36 </div> 37 </div> 38 <div class="bashoC kakusu"> 39 <div class="swiper-container bashoCbg"> 40 <div class="swiper-wrapper"> 41 <div class="swiper-slide" data-hash="CN" id="CN">C地点:北</div> 42 <div class="swiper-slide" data-hash="CE" id="CE"> 43 <a href="#AE" onclick="switchSusumu('bashoA')" ;>C地点:東に進む</a> 44 </div> 45 <div class="swiper-slide" data-hash="CS" id="CS">C地点:南</div> 46 <div class="swiper-slide" data-hash="CW" id="CW"> 47 <a href="#DW" onclick="switchSusumu('bashoD')" ;>C地点:西に進む</a> 48 </div> 49 </div> 50 <!-- Add Arrows --> 51 <div class="swiper-button-next"></div> 52 <div class="swiper-button-prev"></div> 53 </div> 54 </div> 55 <div class="bashoD kakusu"> 56 <div class="swiper-container bashoDbg"> 57 <div class="swiper-wrapper"> 58 <div class="swiper-slide" data-hash="DN" id="DN">D地点:北</div> 59 <div class="swiper-slide" v="DE" id="DE"> 60 <a href="#CE" onclick="switchSusumu('bashoC')" ;>D地点:東に進む</a> 61 </div> 62 <div class="swiper-slide" data-hash="DS" id="DS">D地点:南</div> 63 <div class="swiper-slide" data-hash="DW" id="DW">D地点:西</div> 64 </div> 65 <!-- Add Arrows --> 66 <div class="swiper-button-next"></div> 67 <div class="swiper-button-prev"></div> 68 </div> 69 </div> 70 </div>

JavaScript

1 2 //Swiper初期化 3 var mySwiper = new Swiper('.swiper-container', { 4 navigation: { 5 nextEl: '.swiper-button-next', 6 prevEl: '.swiper-button-prev', 7 }, 8 nextButton: '.swiper-button-next', 9 prevButton: '.swiper-button-prev', 10 hashNavigation: { 11 replaceState: true, 12 }, 13 loop: true, 14 paginationClickable: true, 15 slidesPerView: 1, 16 grabCursor: true, 17 spaceBetween: 10 18 }); 19 20 //最初は入口を表示する 21 document.getElementById("hajime").style.visibility = "visible"; 22 23 //地点変更 24 function switchSusumu(className) { 25 var nodes = document.getElementsByClassName('kakusu'); 26 for (var i = 0; i < nodes.length; i++) { 27 nodes[i].style.visibility = 'hidden'; 28 } 29 var displayNode = document.getElementsByClassName(className); 30 for (var i = 0; i < displayNode.length; i++) { 31 displayNode[i].style.visibility = 'visible'; 32 } 33 }

CSS

1 2 body, 3 html{ 4 font-size: 26px; 5 text-align: center; 6 } 7 .basho-container{ 8 border: 1px solid #ccc; 9 } 10 .kakusu { 11 margin: 0; 12 padding: 0; 13 visibility: hidden; 14 height: 0; 15 } 16 .swiper-slide{ 17 margin: 0; 18 width:90%; 19 height: 90%; 20 padding: 30% 0; 21 display: block; 22 } 23 #hajime a{ 24 background-color: #c4a3ff; 25 margin: 0; 26 width:90%; 27 height: 90%; 28 padding: 30% 0; 29 display: block; 30 } 31 .bashoAbg{ 32 background-color: #a3e2ff; 33 } 34 .bashoBbg{ 35 background-color: #ffa3dc; 36 } 37 .bashoCbg{ 38 background-color: #a3ffc6; 39 } 40 .bashoDbg{ 41 background-color: #ffcaa3; 42 }

こんなページです。
http://hoge.sakuraweb.com/hoge.html
※サンプルページのURLを設定したばかりなので数時間表示されないかもです(><;

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

表示させたいスライドにswiper-slide-activeをつけることが出来れば上手く動くのかな?と思うのですが
JavaScriptの書き方もよくわかっていない初心者のため質問させて頂きました。
ご教授いただければ幸いです

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

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

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

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

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

guest

回答1

0

swiper自体の切り替えとハッシュは連動しませんよね。なので、hashNavigationを使わずに独自に実装する必要があると思います。(複数のswiperが1つのハッシュを書き換えてしまうため)

【hash | Location - JavaScript リファレンス】
http://www.webcreativepark.net/javascript/location/hash/

【現在開いているページのハッシュを取得・設定 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website】
http://shanabrian.com/web/javascript/location-hash.php

【JavaScriptでURLのパラメータやアンカーを判断して処理を変更する方法 | Tips Note by TAM】
https://www.tam-tam.co.jp/tipsnote/javascript/post9911.html

投稿2018/10/20 17:05

kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問