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

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

ただいまの
回答率

87.91%

モーダルウィンドウ + サムネイル付きスライダー を作成したい

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 6,619

score 5

質問

Webページ内にあるボタンを選択したら、指定されたサムネイル付きスライダーがモーダルで表示される(Lightbox)といった表示を実装したいと考えています。

※実装したいイメージ
イメージ説明

①ページ内にモーダルウィンドウを制御するボタンを複数用意

②任意のボタンを選択

③指定したメインスライドとサムネイルがアクティブ表示される(例:②で2番目のボタンを選択したら、③では2つ目のメインスライドとそのサムネイルがアクティブで表示される)
④閉じるボタン もしくは、モーダルウィンドウコンテンツ外のエリアを選択するとモーダルウィンドウが閉じる

モーダルウィンドウ単体、サムネイル付きスライダー単体での実装はremodal.jsやslick.jsなどを使った経験はあるものの、いくら調べても全く分からなかったので質問させていただきました。
現状のjsの知見は、ライブラリベースで何とか構築できる程度です。
恐れ入りますが、どなたかお教えいただけると大変ありがたいです。
よろしくお願いいたします。

試したこと

・調査(インターネット検索)
・実装

検証中で最も実装に近い??ソース

外部でライブラリを読み込んでいます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

実装中のコード

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="description" content="">
<meta name="keywords" content="">

<link rel="stylesheet" type="text/css" href="/shared/css/slick/slick.css">
<link rel="stylesheet" type="text/css" href="/shared/css/slick/slick-theme.css">

<style>
body {
background-color: #333;
color: #ccc;
text-align: center;
}
body a, body a:visited {
color: #ccc;
text-decoration: none;
}
body a:hover {
color: #aaa;
}

.container {
position: relative;
margin: 0 auto;
height: 40vw;
display: flex;
justify-content: center;
opacity: 0;
animation: mainFadeIn 2s forwards 1.8s;
}

.main-slider {
position: relative;
width: calc(100vw - 26vw);
height: 100%;
overflow: hidden;
}
.main-slider .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main-slider .slide:target {
z-index: 3;
animation: show 1.2s;
}
.main-slider .slide:target:first-of-type {
z-index: 3;
}
.main-slider .slide:target:first-of-type .meta {
transform: translateX(-50px);
filter: blur(5px);
opacity: 0;
}
.main-slider .slide:target .meta {
animation: showMeta 1.2s ease 0.9s forwards;
}
.main-slider .slide:not(:target):not(:first-of-type) {
animation: hide 1.2s ease;
}
.main-slider .slide:not(:target):not(:first-of-type) .meta {
animation: hideMeta 1s ease forwards;
}
.main-slider .slide:first-of-type {
z-index: 1;
}
.main-slider .slide:first-of-type .meta {
transform: translateX(0);
filter: blur(0);
opacity: 1;
}
.main-slider .slide .meta {
position: absolute;
top: calc(50% - 19px);
left: 0;
padding: 0 40% 0 2.4vw;
color: #fff;
text-align: left;
transform: translateX(-50px);
filter: blur(5px);
opacity: 0;
}
.main-slider .slide .meta .title {
font-size: 38px;
font-weight: 800;
}
.main-slider .slide .meta .desc {
margin-top: 20px;
font-size: 15px;
}

.thumbnail-slider {
position: relative;
width: 26vw;
height: 100%;
line-height: 0;
overflow-y: auto;
}
.thumbnail-slider::-webkit-scrollbar {
width: 5px;
}
.thumbnail-slider::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.28);
}
.thumbnail-slider::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.44);
}
.thumbnail-slider .slide {
position: relative;
height: 20%;
overflow: hidden;
}
.thumbnail-slider .slide:hover figure img {
transform: scale(1.1);
}
.thumbnail-slider .slide figure img {
transition: transform 0.5s;
}

.slide figure {
height: 100%;
}
.slide figure img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}

@keyframes mainFadeIn {
to {
opacity: 1;
}
}
@keyframes show {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes hide {
0% {
z-index: 2;
}
100% {
z-index: 2;
}
}
@keyframes showMeta {
0% {
transform: translateX(-50px);
filter: blur(5px);
opacity: 0;
}
100% {
transform: translateX(0);
filter: blur(0);
opacity: 1;
}
}
@keyframes hideMeta {
0% {
transform: translateX(0);
filter: blur(0);
opacity: 1;
}
100% {
transform: translateX(-50px);
filter: blur(5px);
opacity: 0;
}
}

/*modal*/
.content{
margin: 0 auto;
padding: 40px;
}
.modal{
display: none;
height: 100vh;
position: fixed;
top: 0;
width: 100%;
}
.modalbg{ background: rgba(0,0,0,0.8); height: 100vh; position: absolute; width: 100%; } .modalcontent{
background: #fff;
left: 50%;
padding: 40px;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 60%;
}

/*add css*/
.text-slider {
display: flex;
}
.text-slider li {
padding-left: 20px;
list-style: none;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- <script type="text/javascript" src="/shared/js/slick.min.js"></script> -->

<script>
$(function(){
$('.js-modal-open').on('click',function(){
$('.js-modal').fadeIn();
return false;
});
$('.js-modal-close').on('click',function(){
$('.js-modal').fadeOut();
return false;
});
});

</script>
</head>

<body>

<div class="content">
<ul class="text-slider" id="txt">
<li class="slide">
<a class="js-modal-open" id="thisone1" href="#slide-1">指定スライド1</a>
</li>
<li class="slide">
<a class="js-modal-open" id="thisone2" href="#slide-2">指定スライド2</a>
</li>
<li class="slide">
<a class="js-modal-open" id="thisone3" href="#slide-3">指定スライド3</a>
</li>
<li class="slide">
<a class="js-modal-open" id="thisone4" href="#slide-4">指定スライド4</a>
</li>
</ul>
</div>

<div class="modal js-modal">
<div class="modalbg js-modal-close"></div> <div class="modalcontent">

<div class="container">
<ul class="main-slider" id="room">
<li class="slide" id="slide-1">
<figure><img src="https://drive.google.com/uc?export=view&amp;id=1sRjMAeYv2axSKgRPtLHyk7LaHne8K4oq" /></figure>
<div class="meta">
<p class="title">Elisa Cannon</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li class="slide" id="slide-2">
<figure><img src="https://drive.google.com/uc?export=view&amp;id=1Ido1e59DT4GltXbmnTEmfJjkGdLwslZK" /></figure>
<div class="meta">
<p class="title">Salvatore Wilson</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li class="slide" id="slide-3">
<figure><img src="https://drive.google.com/uc?export=view&amp;id=1eGcqYmliPjIdxGXxyk2BrC4-KtOtFXK9" /></figure>
<div class="meta">
<p class="title">Suzanne Flowers</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li class="slide" id="slide-4">
<figure><img src="https://drive.google.com/uc?export=view&amp;id=1p7Akjvwh-yMhErDMvDFKb7YxpERMMXtX" /></figure>
<div class="meta">
<p class="title">Evelyn Sanchez</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
</ul>
<nav role="navigation">
<ul class="thumbnail-slider" id="thmb">
<li class="slide">
<a href="#slide-1">
<figure><img src="https://drive.google.com/uc?export=view&amp;id=1sRjMAeYv2axSKgRPtLHyk7LaHne8K4oq" /></figure>
</a>
</li>
<li class="slide">
<a href="#slide-2">
<figure><img src="https://drive.google.com/uc?export=view&amp;id=1Ido1e59DT4GltXbmnTEmfJjkGdLwslZK" /></figure>
</a>
</li>
<li class="slide">
<a href="#slide-3">
<figure><img src="https://drive.google.com/uc?export=view&amp;id=1eGcqYmliPjIdxGXxyk2BrC4-KtOtFXK9" /></figure>
</a>
</li>
<li class="slide">
<a href="#slide-4">
<figure><img src="https://drive.google.com/uc?export=view&amp;id=1p7Akjvwh-yMhErDMvDFKb7YxpERMMXtX" /></figure>
</a>
</li>
</ul>
</nav>
</div>

<a class="js-modal-close" href="">閉じる</a>
</div><!--modal__inner-->
</div><!--modal-->

</body>
</html>

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

slick.jsを使って、作ってみみました。

slick.jsを以下からダウンロードして、パスを設定してもらえば、動くかと思います。
(以下のページのget it nowタブを押せば、ダウンロードリンクまで飛びます)
http://kenwheeler.github.io/slick/
ダウンロードしたフォルダ内の

  • slick-theme.css
  • slick.css
  • slick.min.js

を使います。
あと、fontsフォルダを上記3つのファイルと同階層に入れてください。
あとは、imgタグに画像を設定してもらえば、動くと思います。

chromeとfirefoxでは正常に動いたので、いいと思いますが。

イメージ
イメージ説明

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <meta name="description" content="">
    <meta name="keywords" content="">

    <!-- スクリプトの読込順は重要 -->
    <link href="slick/slick-theme.css" rel="stylesheet" type="text/css">
    <link href="slick/slick.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>

</head>

<body>
    <!-- メイン画面 -->
    <div class="navigation">
            <li class="slide">
                <span>指定スライド1</span>
            </li>
            <li class="slide">
                <span>指定スライド2</span>
            </li>
            <li class="slide">
                <span>指定スライド3</span>
            </li>
            <li class="slide">
                <span>指定スライド4</span>
            </li>
    </div>
    <div class="contents">
        <h1>WEBコンテンツ</h1>
    </div>
    <!-- メイン画面(終) -->

    <!-- モーダルウィンドウ -->
    <div class="modal-window" hidden><!--初期画面は非表示-->
        <div class="close-btn">×</div>
        <div class="wrapper">
            <ul class="slider">
                <li><a href="#"><img src="images/01.jpg" alt="image01"></a></li>
                <li><a href="#"><img src="images/02.jpg" alt="image02"></a></li>
                <li><a href="#"><img src="images/03.jpg" alt="image03"></a></li>
                <li><a href="#"><img src="images/04.jpg" alt="image04"></a></li>
            </ul>
            <p>スライド1の見出し.</p>
            <p>スライド1の説明テキストが入ります.</p>
            <div class="thmb-wrapper">
                <ul class="thumb">
                    <li><img src="images/01.jpg" alt="image01"></li>
                    <li><img src="images/02.jpg" alt="image02"></li>
                    <li><img src="images/03.jpg" alt="image03"></li>
                    <li><img src="images/04.jpg" alt="image04"></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- モーダルウィンドウ(終)-->
</body>
</html>


<script>
    var flag = false; //モーダル表示1回目か判断するフラグ

    //====slick.jsの設定====
    function slick_setting(){
        $('.slider').slick({
            arrows:true, //メイン画像の矢印表示
        });
        $('.thumb').slick({
            arrows:false, //サムネの矢印非表示
            slidesToShow:4, //スライドの枚数
            draggable:false, //ドラッグ切替無効
        });
    }

    //====メイン画面のクリック設定====
    $('.navigation li').click(function() {
        var index = $(this).index(); //クリックされた画像番号
        $('.modal-window').show(); //モーダル表示
        if(flag==false){
            slick_setting(); //モーダル表示の1回目だけ実施
            flag=true;
        }
        var index = $(this).index(); //クリックされた画像番号
        $('.slider').slick('slickGoTo', index);//メイン画像の切替
        $(".thumb li img").css({border: '3px solid transparent',}); //サムネの囲い線を透明にする
        $(".thumb li img").eq(index).css({border: '3px solid red',}); //表示されている画像サムネの囲い線に色をつける
    });

    //====閉じるボタンの設定====
    $('.close-btn').click(function() {
        $('.modal-window').hide();
    });

    //====サムネのクリック設定====
    $('.thumb li').click(function() {
        var index = $(this).index(); //クリックされた画像番号
        $('.slider').slick('slickGoTo', index); //メイン画像の切替
        $(".thumb li img").css({border: '3px solid transparent',}); //サムネの囲い線を透明にする
        $(".thumb li img").eq(index).css({border: '3px solid red',}); //表示されている画像サムネの囲い線に色をつける
    });

    //====next,prevボタンのクリック設定====
    $('.slider').on('beforeChange', function(slick, currentSlide, beforeSlide, afterSlide,){
        $(".thumb li img").css({border: '3px solid transparent',}); //サムネの囲い線を透明にする
        $(".thumb li img").eq(afterSlide).css({border: '3px solid red',}); //表示されている画像サムネの囲い線に色をつける
    });

    //====wrapperの外側がクリックされた時====
    $('.modal-window').click(function(event) {
      if(!$(event.target).closest('.wrapper').length) {
        $('.modal-window').hide();
      }
    });
</script>
/*style.css*/

body {
    text-align: center;
    box-sizing: border-box;
    margin: 0;
    padding:0;
}

/*メイン画面*/
.navigation{
    margin-top: 100px;
}
.navigation li{
    display: inline;
    border: 1px solid black;
    padding: 5px;
    cursor: pointer;
    cursor: hand;
}
.navigation li:hover{
    background-color: darkgray;
}
.contents{
    width: 80%;
    padding: 200px 50px;
    border: 1px solid black;
    margin: 20px auto;
}
/*メイン画面(終)*/

/*モーダルウィンドウ*/
.modal-window{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: pink;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    /*border: 1px solid red;*/
}
.close-btn{
    position: absolute;
    top: 10px;
    right: 20px;
    color: white;
    font-size: 30px;
    cursor: pointer;
    cursor: hand;
}
/*モーダルウィンドウ(終)*/

/*====slickレイアウト設定====*/
ul {
    padding-inline-start: 0px;
    list-style-type: disc;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}


.wrapper{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 70%;
    height: 80%;
    border: 1px solid white;
    padding: 0;
    padding-top: 50px;
    background-color: rgba(0,0,0,0.4)
}
.slider{
    margin: 0px auto;
    width: 60%;
    border: 1px solid red;
}
.slider img{
    height: 100%;
    width: 100%;
}
.slick-prev:before,
.slick-next:before {
    color: white;
}
.thumb{
    width: 30%;
    margin: 0 auto;
}

.thumb li{
    margin-right: 10px;
}
.thumb img{
    width: 100%;
    height: auto;
    cursor: pointer;
    cursor: hand;
}
.slider{
    margin-bottom: 20px;
}
/*====slickレイアウト設定(終)====*/

以上

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る