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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

スライダー

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

タブ

コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

JavaScript

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

Q&A

解決済

1回答

6721閲覧

swiperを2つのタブ切り替えで使うとナビゲーションがうまく表示されない不具合が解決できません

musashidayo

総合スコア53

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

スライダー

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

タブ

コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

JavaScript

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

1グッド

2クリップ

投稿2018/01/10 03:08

前回の質問( https://teratail.com/questions/106802 )で、回答者様からのアドバイスも有り、2タブを切り替えてその中にswiperを用いてスライダーを実装し、機能するようにはなったのですが、
切り替えた先のタブでswiper-paginationがうまく表示されないという不具合が発生しています。アドバイスお願いします。

html <a href="#" class="tab">toggle tab</a> <!-- Slider main container --> <div class="swiper-container tab1"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1-1</div> <div class="swiper-slide">Slide 1-2</div> <div class="swiper-slide">Slide 1-3</div> </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- If we need scrollbar --> <div class="swiper-scrollbar"></div> </div> <!-- Slider main container --> <div class="swiper-container tab2 active"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 2-1</div> <div class="swiper-slide">Slide 2-2</div> <div class="swiper-slide">Slide 2-3</div> </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- If we need scrollbar --> <div class="swiper-scrollbar"></div> </div>
javascript var mySwiper = new Swiper ('.swiper-container', { // Optional parameters loop: true, observer: true, // If we need pagination pagination: { el: '.swiper-pagination', }, // Navigation arrows navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // And if we need scrollbar scrollbar: { el: '.swiper-scrollbar', }, }); document.querySelector('a.tab').addEventListener('click', _ =>{ document.querySelector('div.tab1').classList.toggle('active'); document.querySelector('div.tab2').classList.toggle('active') });
css .swiper-container { width: 600px; height: 300px; } div.tab1,div.tab2{ display:none; } div.tab1.active,div.tab2.active{ display:block; }

https://jsfiddle.net/sdsxuckg/

negiyama👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

Swiperはコンテナをdisplay:none;にするとうまくいかないようです。下記のようにCSSとJavaScriptで調整します。

css

1div.tab1,div.tab2{ 2 top: -9999px; 3} 4div.tab1.active,div.tab2.active{ 5 top: auto; 6}

タブ2が表示されたときに高さを調整します。コンテナ.swiper-container要素はposition:relativeなのでTAB2が表示された時に、TAB1の高さ分上にJavaScriptでずらしています。
スクロールバーのサイズ(scrollbar.dragSize)はバグのため手動設定が必要です。

js

1var mySwiper = new Swiper('.swiper-container', { 2 // Optional parameters 3 loop: true, 4 observer: true, 5 6 // If we need pagination 7 pagination: { 8 el: '.swiper-pagination', 9 }, 10 11 // Navigation arrows 12 navigation: { 13 nextEl: '.swiper-button-next', 14 prevEl: '.swiper-button-prev', 15 }, 16 17 // And if we need scrollbar 18 scrollbar: { 19 el: '.swiper-scrollbar', 20 dragSize: (600 * 0.98 / 3), //スライド画面の横幅が600pxでスクロールバーは98%で3画面 21 }, 22 23}); 24 25document.querySelector('a.tab').addEventListener('click', _ =>{ 26 document.querySelector('div.tab1').classList.toggle('active'); 27 document.querySelector('div.tab2').classList.toggle('active'); 28 29 if (document.querySelector('div.tab1').offsetTop < 0) { 30 document.querySelector('div.tab2').style.top = -(document.querySelector('div.tab1').offsetHeight)+'px'; 31 } 32});

スクロールバーの挙動がおかしいのはSwiperのバグです。
SwiperではループをONにするとスライド両端にコピー要素を追加します。下記のように**(3*)(1*)**が初期画面で追加されます。ループなのでここまでは良いのですが、スクロールバーの計算はこれらすべてのコピー要素を含めて計算しているためにおかしくなっています。

(3*) < (1) > (2) (3) (1*)

下記は1画面1スライドのみのswiper.jsパッチです。グループ機能などは考慮していません。行頭の**+**行部分が追加コードです。大元のロジックを修正したほうが良いとは思いますが、とりあえずきちんと正しく表示はされるはずです。

js

1 var updateProgress = function (translate) { 2 if (translate === void 0) translate = this.translate || 0; 3 4 var swiper = this; 5 var params = swiper.params; 6 7 var translatesDiff = swiper.maxTranslate() - swiper.minTranslate(); 8+ if (params.loop && swiper.isHorizontal()) { 9+ var slides = swiper.$wrapperEl 10+ .children(("." + (params.slideClass) + ":not(." + (params.slideDuplicateClass) + ")")); 11+ 12+ var idx = this.snapGrid.indexOf(-(translate)); 13+ 14+ translate = -(this.snapGrid[(idx == 0 ? slides.length - 1 : (idx == this.snapGrid.length - 1 ? 0 : idx - 1))]); 15+ translatesDiff = -(this.snapGrid[(slides.length - 1)] - swiper.minTranslate()); 16+ } 17+ 18 var progress = swiper.progress; 19 var isBeginning = swiper.isBeginning; 20 var isEnd = swiper.isEnd; 21 var wasBeginning = isBeginning; 22 var wasEnd = isEnd; 23 if (translatesDiff === 0) { 24 progress = 0; 25 isBeginning = true; 26 isEnd = true; 27 } else { 28 progress = (translate - swiper.minTranslate()) / (translatesDiff); 29 isBeginning = progress <= 0; 30 isEnd = progress >= 1; 31 } 32 Utils.extend(swiper, { 33 progress: progress, 34 isBeginning: isBeginning, 35 isEnd: isEnd, 36 });

投稿2018/01/12 12:57

Tomak

総合スコア1652

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問