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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

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

jQuery

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

Q&A

解決済

1回答

2299閲覧

タブ切り替え、スライドショー、modalの同時実装

y-i1171

総合スコア1

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

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

jQuery

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

0グッド

0クリップ

投稿2021/01/25 06:20

前提・実現したいこと

練習としてwordpressでコーポレートサイト制作をしております。

wordpressの記事をタブ切り替え、スライドショー(swiper.js)、modal対応させようと考えています。
カテゴリA、B、C、Dそれぞれ4つのスライドショーを用意し、タブ切り替えでdisplay:blockとnoneを切り替えています。
さらにそのスライドショーのコンテンツの中には「続きを見る」ボタンがあり、そのボタンをクリックすると、
各記事の本文がmodalで全て出力されるという機能を実装したいです。

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

タブ切り替えとスライドショー(swiper.js)を両立させようとすると、
display:noneのオブジェクトをjs側で認識させられないためスライドショーが動きません。

また、スライドショーの中にmodalを実装すると、swiperにもともとあるCSSのoverflow:hiddenの影響で(?)、
modalが画面全体に広がってくれません。

該当のソースコード

php

1<div class="sp_future"> 2  <div class="swiper-container next_wrap sp_future_meet_show"> 3   <div class="swiper-wrapper"> 4     <?php 5    $args = array( 6 'category_name' => 'future-matching', 7 'posts_per_page' => -1, 8 'order' => 'ASC' 9 ); 10    $the_query = new WP_Query( $args ); 11    while ( $the_query->have_posts() ) : $the_query->the_post(); ?> 12 <div class="swiper-slide"> 13   <div class="future_meet_item"> 14     <h3><?php the_title(); ?></h3> 15   <div class="future_meet_img"> 16    <?php the_post_thumbnail(); ?> 17    </div> 18    <div class="future_meet_text"> 19      <?php 20        if(mb_strlen($post->post_content, 'UTF-8')>150){ 21       $content= mb_substr(strip_tags($post->post_content, '<p></p><br><span>'), 0, 150, 'UTF-8'); 22    echo $content.'<p class="meet_next">︙</p>'; 23 }else{ 24 echo strip_tags($post->post_content, '<p><br><span>'); 25 } 26 ?> 27 </div> 28 <div class="future_meet_btn"> 29 <a class="js-modal-open" target="<?php echo the_ID(); ?>">詳細はこちら</a> 30 </div> 31 <div id="sp_<?php echo the_ID(); ?>" class="modal js-modal"> 32 <div class="modal__bg js-modal-close"></div> 33 <div class="modal__content"> 34 <?php echo $post->post_content; ?> 35 <a class="js-modal-close-btn" href=""></a> 36 </div><!--modal__inner--> 37 </div><!--modal--> 38 </div> 39 </div> 40 <?php endwhile; wp_reset_postdata(); ?> 41 </div> 42 <div class="swiper-button-prev prev-btn1"></div> 43 <div class="swiper-button-next next-btn1"></div> 44</div>

js

1jQuery(function($){ 2 if(window.innerWidth > 767){ 3 let future_tabs = $('.future_tab_item'); 4 $('.future_tab_item').on('click',function(){ 5 $('.future_tab_active').removeClass('future_tab_active'); 6 $(this).addClass('future_tab_active'); 7 const index = future_tabs.index(this); 8 $(".future_meet").removeClass("future_meet_show").eq(index).addClass("future_meet_show"); 9 }); 10 }else{ 11 let future_tabs = $('.future_tab_item'); 12 $('.future_tab_item').on('click',function(){ 13 $('.future_tab_active').removeClass('future_tab_active'); 14 $(this).addClass('future_tab_active'); 15 const index = future_tabs.index(this); 16 $(".swiper-container").removeClass("sp_future_meet_show").eq(index).addClass("sp_future_meet_show"); 17 }); 18 } 19 20 21 if(window.innerWidth > 767){ 22 $('.js-modal-open').on('click',function(){ 23 var id = $(this).attr('target'); 24 $("#" + id).fadeIn(); 25 return false; 26 }); 27 }else{ 28 $('.js-modal-open').on('click',function(){ 29 var id = $(this).attr('target'); 30 $("#sp_" + id).fadeIn(); 31 return false; 32 }); 33 } 34 35 $('.js-modal-close').on('click',function(){ 36 $('.js-modal').fadeOut(); 37 return false; 38 }); 39 $('.js-modal-close-btn').on('click',function(){ 40 $('.js-modal').fadeOut(); 41 return false; 42 }); 43 44 45 var futuremeetSwiper = new Swiper('.swiper-container', { 46 allowTouchMove: true, 47 navigation: { 48 nextEl: '.swiper-button-next', 49 prevEl: '.swiper-button-prev', 50 }, 51 spaceBetween: 10, 52 slidesPerView: 1, 53 breakpoints: { 54 767: { 55 slidesPerView: 3, 56 }, 57 } 58 }); 59});

タブ切り替え、スライドショー(swiper.js)、modalの同時実装は可能なのでしょうか。
よろしくお願い致します。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2021/01/25 06:33 編集

逆に、どこかに同時実装できないとか書いてあったのですか?
guest

回答1

0

ベストアンサー

スライダー系統のよくある動作として、全てのアイテムの高さを最大の高さのものに合わせる、
というのがあるのですが、その辺でつまづいてる感じでしょうか。

sliderの中でmodalが動かないのは多分、transformしてる要素の中では
position:fixedの子要素の座標の基準がビューポートじゃなく
transformしてる要素の座標が基準になる、というところでしょうか。

前者はカルーセルのイニシャライズが終わってから非表示にするか
不可視・操作不能にするだけでdisplay:noneにはしない様にする
後者はモーダルの表示内容はスライダー外に置くか表示時に外に出す
というのがとりあえず回避策になるでしょうか。

投稿2021/01/25 07:05

KazuhiroHatano

総合スコア7802

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

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

y-i1171

2021/01/26 01:10

>前者はカルーセルのイニシャライズが終わってから非表示にするか 不可視・操作不能にするだけでdisplay:noneにはしない様にする 後者はモーダルの表示内容はスライダー外に置くか表示時に外に出す というのがとりあえず回避策になるでしょうか。 上記ご教示いただきありがとうございます。 こちらの回避策でなんとか実装できました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問