スライダーをポップアップで表示をさせたいです

Question

###前提・実現したいこと
ボタンを押したらlightboxのようにコンテンツがポップアップし、
更に画像がスライドできるようにしたいです。

スライダーの「Swiper」をモーダルウィンドウで表示させれば可能なのではと思い、
下記のサイト様を参考にしながらなんとか合体させたのですが、
狙い通り表示される時もあれば、何回か更新したり画面幅を変更したりすると
画像が大きくなったり消えたりと挙動が安定しません。

試行錯誤しながら合体させたので無理矢理になってしまっていると思うのですが、
どの部分の所為で不安定になっているか原因が分からず困っています。
どうかご教示いただけないでしょうか。
不明確な点などありましたらご指摘ください。

◆参考にさせていただいたサイト様
https://www.willstyle.co.jp/blog/724/
https://www.tam-tam.co.jp/tipsnote/html_css/post8031.html

◆望んでいる挙動
・ボタン（画像）をクリックするとポップアップでスライダーが表示
・画像が小さい正方形のため、前後の画像も画面内に表示
・スライダー部分以外は黒の半透明で、その部分をクリックするとスライダーが非表示
・画面幅が変わっても対応できるようレスポンシブに
※ボタンとスライダーのセットは1ページ内に複数設置します。
※スライダーからのリンクはありません。

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

何回か更新や画面幅を変えた時に表示が崩れ、画像が大きくなったり消えたりと挙動が安定しません。
（正しく表示される時もあります）

###該当のソースコード

<p class="swiper-btn"><img src="btn.jpg" alt=""></p>
<div class="swiper">
<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="img1.jpg" alt=""></div>
		<div class="swiper-slide"><img src="img2.jpg" alt=""></div>
		<div class="swiper-slide"><img src="img3.jpg" alt=""></div>
	</div>
	<div class="swiper-pagination"></div>
</div>
</div>

https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css
と下記のコード

.swiper-container .swiper-slide img{ max-width: 100%; height: auto; }
.swiper-container{ position:fixed; top:50%; left:0; z-index:2; }
#modal-bg{ width:100%; height:100%; background-color: rgba(0,0,0,0.5); position:fixed; top:0; left:0; z-index: 1; display:block; }

◆モーダルウィンドウ用（head内）
$(function(){
	$(".swiper").hide();

	$(".swiper-btn").click(function(){
		$(this).next().show();
		$("body").append('<div id="modal-bg"></div>');
		
		var h = $(this).next().find(".swiper-container").height();
		$(".swiper-container").css({ "margin-top": "-" + h/2 + "px" });
		
		$(".swiper,#modal-bg").click(function(){
			$(".swiper,#modal-bg").hide(0 ,function(){
			$('#modal-bg').remove() ;
			});
		});	 
	});
});

◆swiperオプション用（bodyのすぐ上）
var mySwiper = new Swiper ('.swiper-container', {
  loop: true,
  slidesPerView: 4,
  spaceBetween: 10,
  centeredSlides : true,
  pagination: '.swiper-pagination',
  breakpoints: {
    767: {
      slidesPerView: 2,
      spaceBetween: 5
    }
  }
})

###補足情報(言語/FW/ツール等のバージョンなど)
jquery(min)：2.0.2
swiper(min)：3.4.1

Answer 1

lightGallery とかなら似た挙動になりそうなのですが、どうでしょう。

【lightGallery】
http://sachinchoolur.github.io/lightGallery/

【lightGallery: thumbnails】
http://sachinchoolur.github.io/lightGallery/demos/index.html

【lightGallery: Dynamic】
http://sachinchoolur.github.io/lightGallery/demos/dynamic.html

Comments

[sor]

kei344さん新しいプラグインのご提示ありがとうございます！

早速デモを確認したところ表示のさせ方は理想でした。
まだ触ってみている途中ですが、
・リンク前のボタンはサムネの羅列ではなくボタン一つ
・前後の画像も画面無いに少し表示（小さめの画像で正方形のため）
　（.lg-outer .lg-image{ max-height:50%; }と追加で設定してみました）
・ページ内に複数設置
の課題で詰まってしまっています。
自分でも調べているのですが、オプションなどで解決できそうであればお教えいただけますでしょうか。

[sor]

あ、補足です！
ご提示いただいていた「Dynamic Mode」の方が挙動が近いのですが、
更新者が私ではなく全くjsを知らない人のため、可能な限り簡単な記述で更新が出来るよう、
「thumbnails」をベースに課題がクリアできればと考えています。。

[kei344]

> ・前後の画像も画面無いに少し表示（小さめの画像で正方形のため）
これをクリアするのは難しいと思いますので、このライブラリはやめておいたほうがよいですね。

> 可能な限り簡単な記述で更新が出来るよう
これがCMS内なのか手書きのHTMLなのかにも寄りますが、隠し要素内に画像URLを並べてもらうようにして、それをロード時にJavaScriptから読み込んでしまえばできるとは思います。

[sor]

わあすみません！お返事いただいていたことに気付かず、中々実現出来ないと心が折れそうになっていたところでした。
前後を画面内に入れるのはご紹介いただいたものでは難しいのですね。。
手書きのHTMLですが、なるほど「Dynamic Mode」の方でも少し記述を変更すれば簡単に更新できるようになるのですね。

仕様の変更も視野に入れつつ、勉強していきたいと思います。
ご回答いただきありがとうございました！