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

Question

前提・実現したいこと

練習として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が画面全体に広がってくれません。

該当のソースコード

<div class="sp_future">
　　<div class="swiper-container next_wrap sp_future_meet_show">
	　　<div class="swiper-wrapper">
	　　　　<?php
		　　　$args = array(
			'category_name' => 'future-matching',
			'posts_per_page' => -1,
			'order' =>  'ASC'
			);
		　　　$the_query = new WP_Query( $args );
		　　　while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
			<div class="swiper-slide">
			　　<div class="future_meet_item">
			　　　　<h3><?php the_title(); ?></h3>
				　　<div class="future_meet_img">
				　　    <?php the_post_thumbnail(); ?>
			　　    </div>
			　　    <div class="future_meet_text">
			　　　　    <?php
			　　　　　　    if(mb_strlen($post->post_content, 'UTF-8')>150){
				　　　　　    $content= mb_substr(strip_tags($post->post_content, '<p></p><br><span>'), 0, 150, 'UTF-8');
					　　     echo $content.'<p class="meet_next">︙</p>';
					      }else{
						    echo strip_tags($post->post_content, '<p><br><span>');
				          }
			          ?>
				   </div>
				   <div class="future_meet_btn">
				       <a class="js-modal-open" target="<?php echo the_ID(); ?>">詳細はこちら</a>
			       </div>
			       <div id="sp_<?php echo the_ID(); ?>" class="modal js-modal">
		               <div class="modal__bg js-modal-close"></div>
				       <div class="modal__content">
					       <?php echo $post->post_content; ?>
					       <a class="js-modal-close-btn" href="">✕</a>
				       </div><!--modal__inner-->
			       </div><!--modal-->
			   </div>
	       </div>
	       <?php endwhile; wp_reset_postdata(); ?>
	  </div>
	  <div class="swiper-button-prev prev-btn1"></div>
	  <div class="swiper-button-next next-btn1"></div>
</div>

jQuery(function($){
  if(window.innerWidth > 767){
    let future_tabs = $('.future_tab_item');
    $('.future_tab_item').on('click',function(){
    $('.future_tab_active').removeClass('future_tab_active');
    $(this).addClass('future_tab_active');
    const index = future_tabs.index(this);
    $(".future_meet").removeClass("future_meet_show").eq(index).addClass("future_meet_show"); 
  });
  }else{
    let future_tabs = $('.future_tab_item');
    $('.future_tab_item').on('click',function(){
    $('.future_tab_active').removeClass('future_tab_active');
    $(this).addClass('future_tab_active');
    const index = future_tabs.index(this);
    $(".swiper-container").removeClass("sp_future_meet_show").eq(index).addClass("sp_future_meet_show"); 
  });
  }
  
  
  if(window.innerWidth > 767){
    $('.js-modal-open').on('click',function(){
      var id = $(this).attr('target');
      $("#" + id).fadeIn();
      return false;
    });
  }else{
    $('.js-modal-open').on('click',function(){
      var id = $(this).attr('target');
      $("#sp_" + id).fadeIn();
      return false;
    });
  }

  $('.js-modal-close').on('click',function(){
      $('.js-modal').fadeOut();
      return false;
  });
  $('.js-modal-close-btn').on('click',function(){
      $('.js-modal').fadeOut();
      return false;
  });
  
  
  var futuremeetSwiper = new Swiper('.swiper-container', {
    allowTouchMove: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    spaceBetween: 10,
    slidesPerView: 1,
    breakpoints: {
      767: {
        slidesPerView: 3,
      },
    }
  });
});

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

Comments

[退会済みユーザー]

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

Answer 1

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

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

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

Comments

[y-i1171]

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

上記ご教示いただきありがとうございます。
こちらの回避策でなんとか実装できました。
ありがとうございます。