slick.jsとjQueryでモーダルスライダーを作成！html、css、JavaScriptソースコード紹介！

2023年12月10日
コラム

コラム

1 はじめに
2 モーダルスライダーの仕様
3 モーダルスライダーのレイアウト
4 ソースコード例
5 ソースコード解説
- 5.1 html
- 5.2 JavaScript
6 jQueryのCDN
7 slickのCDN
8 他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ

はじめに

実務案件でモーダルスライダーを作成しましたのでどのようなモーダルスライダーかご紹介します。

モーダルスライダーの仕様

画像（赤、青、緑、黄色）をクリックすると、モーダルが開いて、その中にスライダーが現れます。
赤をクリックして開くモーダルには赤に関係するスライダーが現れます。
左右の矢印をクリックでスライドします。自動でスライドはしません。
緑はスライドが1枚しかないので矢印はありません。
モーダル内の右上の×印をクリックで、モーダルが閉じます。

モーダルスライダーのレイアウト

赤

黄

緑

青

ソースコード例

<div class="gallery__list">
	<div class="gallery__item">
    <!-- modal-openにdata-target属性を指定。 -->
		<div data-target="modal01" class="gallery__img modal-open">
        <!-- 適宜画像を入れてください。 -->
		</div>
		<p class="gallery__ttl">赤</p>
	</div>
	<!-- モーダル部分 -->
  <!-- modal-open指定したdata-target属性と同じものをid属性に指定 -->
	<div class="modal fade" id="modal01">
		<div class="modal-close"></div>
		<div class="modal-content">
			<div class="case-gallery__list">
				<div class="case-gallery__item">
					<div class="case-gallery__img">
              <!-- 適宜画像を入れてください。 -->
					</div>
				</div>
				<div class="case-gallery__item">
					<div class="case-gallery__img">
              <!-- 適宜画像を入れてください。 -->
					</div>
				</div>
				<div class="case-gallery__item">
					<div class="case-gallery__img">
              <!-- 適宜画像を入れてください。 -->
					</div>
				</div>
				<div class="case-gallery__item">
					<div class="case-gallery__img">
              <!-- 適宜画像を入れてください。 -->						
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- モーダルここまで -->
	<div class="gallery__item">
		<div data-target="modal02" class="gallery__img modal-open">
        <!-- 適宜画像を入れてください。 -->
		</div>
		<p class="gallery__ttl">黄</p>   
	</div>
	<!-- モーダル部分 -->
	<div class="modal fade" id="modal02">
		<div class="modal-close"></div>
		<div class="modal-content">
			<div class="case-gallery__list">
				<div class="case-gallery__item">
					<div class="case-gallery__img">
              <!-- 適宜画像を入れてください。 -->
					</div>
				</div>
				<div class="case-gallery__item">
					<div class="case-gallery__img">
              <!-- 適宜画像を入れてください。 -->
					</div>
				</div>
				<div class="case-gallery__item">
					<div class="case-gallery__img">
              <!-- 適宜画像を入れてください。 -->
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- モーダルここまで -->
	<div class="gallery__item">
		<div data-target="modal03" class="gallery__img modal-open">
        <!-- 適宜画像を入れてください。 -->				
		</div>
		<p class="gallery__ttl">緑</p>
	</div>
	<!-- モーダル部分 -->
	<div class="modal fade" id="modal03">
		<div class="modal-close"></div>
		<div class="modal-content">
			<div class="case-gallery__list">
				<div class="case-gallery__item">
					<div class="case-gallery__img">
              <!-- 適宜画像を入れてください。 -->
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- モーダルここまで -->
	<div class="gallery__item">
		<div data-target="modal04" class="gallery__img modal-open">
        <!-- 適宜画像を入れてください。 -->
		</div>
		<p class="gallery__ttl">青</p>
	</div>
	<!-- モーダル部分 -->
	<div class="modal fade" id="modal04">
		<div class="modal-close"></div>
		<div class="modal-content">
			<div class="case-gallery__list">
				<div class="case-gallery__item">
					<div class="case-gallery__img">
              <!-- 適宜画像を入れてください。 -->
					</div>
				</div>
				<div class="case-gallery__item">
					<div class="case-gallery__img">
              <!-- 適宜画像を入れてください。 -->
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- モーダルここまで -->
</div>

.gallery__list{
    display:flex;
    padding-top:40px;
    flex-wrap:wrap;
    gap: 20px;
}
.gallery__item{
    width: calc(25% - 15px);
}
.gallery__img {
    position: relative;
}
.gallery__img::before {
    content: "";
    display: block;
    padding-top: 100%;
}
.modal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    display: none;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.75);
}
.modal-open {
    cursor: pointer;
}
.modal-content {
    width: 100%;
    height: 500px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.modal-close {
    width: 50px;
    height: 50px;
    position: fixed;
    top: 0;
    right: 0;
    cursor: pointer;
}
.modal-close::before,
.modal-close::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #fff;
}
.modal-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.modal-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}


.slick-list,.slick-track {
    height: 100%;
}
.case-gallery__list {
    height: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 10px;
    background-color: #fff;
}
.case-gallery__img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
    max-width: 530px;
}
.case-gallery__img::before {
    content: "";
    display: block;
    padding-top: 75%;
}
.case-gallery__img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    object-fit: contain;
}
.case-gallery__txt {
    text-align: center;
    color: #fff;
    margin-top: 15px;
    font-weight: 700;
    font-size: 18px;
}
.modal-content {
    margin: 0 auto;
    overflow: hidden;
}
.prev-arrow,
.next-arrow {
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    cursor: pointer;
    border-left: 3px solid #191919;
    border-top: 3px solid #191919;
    z-index: 1;
}
.prev-arrow {
    left: 40px;
    transform: translateY(-50%) rotate(-45deg);
}
.next-arrow {
    right: 40px;
    transform: translateY(-50%) rotate(135deg);
}

@media (min-width: 481px) and (max-width: 1024px) {
    .gallery__item {
        width: calc(50% - 10px);
    }
}

@media (max-width: 1024px) {
    .case-gallery__list {
        width: 90%;
    }
}

@media (max-width:767px) {
    .modal-content {
        width: 100%;
    }
    .case-gallery__img {
        max-width: 350px;
    }
    .prev-arrow,
    .next-arrow {
        top: 85%;
    }
    .prev-arrow {
        left: 10%;
    }
    .next-arrow {
        right: 10%;
    }
}
@media (max-width: 480px){
    .gallery__item {
        width: 100%;
    }
    .case-gallery__img {
        max-width: 90%;
    }
}

jQuery('.modal-open').each(function(){
    jQuery(this).on('click',function(){
        // クリックした「.modal-open」の「data-target」属性を取得して変数targetに格納
        const target = jQuery(this).data('target');
        const modal = document.getElementById(target);
        // クリックした「.modal-open」と紐づいた「.modal」が開く
        jQuery(modal).fadeIn();
		    // 下記がないと初期スライド幅が0pxになる
		    jQuery('.case-gallery__list').slick('setPosition');
    });
});
jQuery('.modal-close').on('click', function() {
    jQuery('.modal').fadeOut();
});
jQuery('.case-gallery__list').slick({
    autoplay: false,
	  prevArrow: '<div class="prev-arrow"></div>',
    nextArrow: '<div class="next-arrow"></div>',
});

ソースコード解説

html

「.modal-open」にdata-target属性を指定し、「.modal」のid属性に「.modal-open」のdata-targetに指定したものと同じものを指定して、「.modal-open」と「.modal」を紐づけます。

JavaScript

jQuery(‘.case-gallery__list’).slick(‘setPosition’);
この記述がないとモーダルが開いた時にスライド幅が0pxになってスライドが表示されないので必要。

jQueryのCDN

https://releases.jquery.com/

slickのCDN

下記のslickの公式よりコピーしてください。

https://kenwheeler.github.io/slick/#go-get-it

他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ

ソースコード

HTML・CSS ・JavaScriptソースコード紹介記事まとめ

実務経験で作成したレイアウトのHTML・CSS ・JavaScriptソースコードを紹介した記事まとめています。