Modal Gallery

Click Here
PHP
<!-- Modal Button -->
<a href="#" class="button" data-modals="modal_gallery">Click Here</a>

<!-- modal_gallery.php -->
<div class="modal_gallery_wrap">
	<div class="modal_gallery_slider || hidden_slider" data-slider="modal_gallery_slider">
		<?php for ($i = 1; $i < 15; $i++) :?>
			<div class="slider_item">
				<div class="img_wrap">
					<img src="/img/gallery_img_<?= $i?>.jpg" alt="">
				</div>
				<div class="slider_desc">
					<div class="desc">
						<h4>Fish Art Restaurant</h4>
						<p>Take a culinary tour of Toronto’s diverse cultural neighbourhoods with Luma’s innovative seafood-driven menu, and enjoy hand-crafted cocktails and a robust wine list.</p>
					</div>
					<span class="dialog_close">Close</span>
				</div>
			</div>
		<?php endfor ;?>
	</div>
	<div class="modal_gallery_slider_nav || hidden_slider" data-slider="modal_gallery_slider_nav">
		<?php for ($i = 1; $i < 15; $i++) :?>
			<div>
				<div class="slider_item">
					<img src="/img/gallery_img_<?= $i?>.jpg" alt="">
				</div>
			</div>
		<?php endfor ;?>
	</div>
</div>
CSS
.modal_gallery.dialog{padding:0;border-top:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;max-width:70vw}
.modal_gallery.dialog .icon_close.dialog_close{display:none}

.modal_gallery_slider.hidden_slider{opacity:0;overflow:hidden;max-height:58rem}
.modal_gallery_slider .slick-prev,.modal_gallery_slider .slick-next{width:4rem;height:4rem;-webkit-transform:translate(0,-37%);-moz-transform:translate(0,-37%);-ms-transform:translate(0,-37%);-o-transform:translate(0,-37%);transform:translate(0,-37%);background-color:#fff}
.modal_gallery_slider .slick-prev::after,.modal_gallery_slider .slick-next::after{width:1.8rem;height:1.8rem;border-width:0 .4rem .4rem 0;border-color:#000;top:50%}
.modal_gallery_slider .slick-prev{left:.5rem}
.modal_gallery_slider .slick-prev::after{left:54%;-webkit-transform:translate(-50%,-50%) rotate(135deg);-moz-transform:translate(-50%,-50%) rotate(135deg);-ms-transform:translate(-50%,-50%) rotate(135deg);-o-transform:translate(-50%,-50%) rotate(135deg);transform:translate(-50%,-50%) rotate(135deg)}
.modal_gallery_slider .slick-next{right:.5rem}
.modal_gallery_slider .slick-next::after{left:43%;-webkit-transform:translate(-50%,-50%) rotate(-45deg);-moz-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);-o-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}
.modal_gallery_slider .slider_item{padding:.5rem}
.modal_gallery_slider .img_wrap{display:block;padding-top:44%;overflow:hidden;position:relative}
.modal_gallery_slider .img_wrap img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;font-family:'object-fit: cover;'}
.modal_gallery_slider .slider_desc{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:2rem}
.modal_gallery_slider .slider_desc .desc{width:-webkit-calc(100% - 5.2rem);width:-moz-calc(100% - 5.2rem);width:calc(100% - 5.2rem);padding:0 4rem 0 0}
.modal_gallery_slider .slider_desc .desc p{margin:0}
.modal_gallery_slider .slider_desc .desc p:last-child{margin-bottom:0}
.modal_gallery_slider .slider_desc .dialog_close{font-size:1.6rem;font-weight:700;color:#09a5be;text-transform:uppercase;-webkit-box-flex:0;-webkit-flex:0 0 5.2rem;-moz-box-flex:0;-ms-flex:0 0 5.2rem;flex:0 0 5.2rem;margin:.1rem 0 0;cursor:pointer}

.modal_gallery_slider_nav{padding:2rem;background:#eee}
.modal_gallery_slider_nav.hidden_slider{opacity:0;overflow:hidden;max-height:12.1rem}
.modal_gallery_slider_nav .slider_item{display:block;padding-top:67%;overflow:hidden;position:relative;margin:0 .5rem}
.modal_gallery_slider_nav .slider_item img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block;width:100%;height:100%;border:.3rem solid transparent;-o-object-fit:cover;object-fit:cover;font-family:'object-fit: cover;'}
.modal_gallery_slider_nav .slick-current .slider_item img{border-color:#09a5be}

@media only screen and (max-width: 992px) {
	.modal_gallery.dialog{max-width:85vw}
}

@media only screen and (max-width: 767px) {
	.modal_gallery_slider .slider_desc .desc{width:100%;padding:0}
	.modal_gallery_slider .slider_desc .dialog_close{display:none}
	.modal_gallery_slider .slick-prev,.modal_gallery_slider .slick-next{width:3rem;height:3rem}
	.modal_gallery_slider .slick-prev::after,.modal_gallery_slider .slick-next::after{width:1.4rem;height:1.4rem;border-width:0 .3rem .3rem 0}
}

@media only screen and (max-width: 450px) {
	.modal_gallery_slider .img_wrap{padding-top:66%}
	.modal_gallery_slider .slick-prev,.modal_gallery_slider .slick-next{width:2.5rem;height:2.5rem}
	.modal_gallery_slider .slick-prev::after,.modal_gallery_slider .slick-next::after{width:1rem;height:1rem;border-width:0 .2rem .2rem 0}
}
SCSS
/* Vars */
$cb:       #000000;
$main:     #09a5be;
$white:    #ffffff;

.modal_gallery.dialog {
	padding: 0;
	border-top: none;
	border-radius: 0;
	max-width: 70vw;
	
	.icon_close.dialog_close {
		display: none;
	}
}

.modal_gallery_slider {
	&.hidden_slider {
		opacity:0;
		overflow:hidden;
		max-height:58rem;
	}
	
	.slick-prev, .slick-next {
		width: 4rem;
		height: 4rem;
		transform: translate(0, -37%);
		background-color: $white;
		
		&::after {
			width: 1.8rem;
			height: 1.8rem;
			border-width: 0 0.4rem 0.4rem 0;
			border-color: $cb;
			top: 50%;
		}
	}
	
	.slick-prev {
		left: .5rem;
		
		&::after {
			left: 54%;
			transform: translate(-50%, -50%)rotate(135deg);
		}
	}
	
	.slick-next {
		right: .5rem;
		
		&::after {
			left: 43%;
			transform: translate(-50%, -50%)rotate(-45deg);
		}
	}
	
	.slider_item {
		padding: .5rem;
	}
	
	.img_wrap {
		display: block;
		padding-top: 44%;
		overflow: hidden;
		position: relative;
		
		img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			font-family: 'object-fit: cover;';
		}
	}
	
	.slider_desc {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 2rem;
		
		.desc {
			width: calc(100% - 5.2rem);
			padding: 0 4rem 0 0;
			
			p {
				margin: 0;
			}
			
			p:last-child {
				margin-bottom: 0;
			}
		}
		
		.dialog_close {
			font-size: 1.6rem;
			font-weight: 700;
			color: $main;
			text-transform: uppercase;
			flex: 0 0 5.2rem;
			margin: .1rem 0 0;
			cursor: pointer;
		}
	}
}

.modal_gallery_slider_nav {
	padding: 2rem;
	background: #eeeeee;
	
	
	&.hidden_slider {
		opacity:0;
		overflow:hidden;
		max-height:12.1rem;
	}
	
	.slider_item {
		display: block;
		padding-top: 67%;
		overflow: hidden;
		position: relative;
		margin: 0 .5rem;
		
		img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: block;
			width: 100%;
			height: 100%;
			border: .3rem solid transparent;
			object-fit: cover;
			font-family: 'object-fit: cover;';
		}
	}
	
	.slick-current .slider_item img {
		border-color: $main;
	}
}

@media only screen and (max-width: 992px) {
	.modal_gallery.dialog {max-width: 85vw}
}

@media only screen and (max-width: 767px) {
	.modal_gallery_slider .slider_desc .desc {width: 100%;padding: 0}
	.modal_gallery_slider .slider_desc .dialog_close {display: none}
	.modal_gallery_slider .slick-prev, .modal_gallery_slider .slick-next {width: 3rem;height: 3rem;}
	.modal_gallery_slider .slick-prev::after, .modal_gallery_slider .slick-next::after {width: 1.4rem;height: 1.4rem;border-width: 0 0.3rem 0.3rem 0}
}

@media only screen and (max-width: 450px) {
	.modal_gallery_slider .img_wrap {padding-top: 66%}
	.modal_gallery_slider .slick-prev, .modal_gallery_slider .slick-next {width: 2.5rem;height: 2.5rem;}
	.modal_gallery_slider .slick-prev::after, .modal_gallery_slider .slick-next::after {width: 1rem;height: 1rem;border-width: 0 0.2rem 0.2rem 0}
}
JavaScript
if (type == 'modal_gallery') {
	$('.dialog').addClass('modal_gallery');
	
	var $slidersArray = [];
	
	function findSliders() {
		$('body').find('.hidden_slider').each(function () {
			var slider_Item = $(this).data('slider');
			$slidersArray.push(slider_Item);
		});
		for (var itemS = 0; itemS < $slidersArray.length; itemS++) {
			var $sliderTimer = 'sliderTimer_' + itemS,
				$slides = $slidersArray[itemS];
			fixSlider($slides, $sliderTimer)
		}
	}
	
	findSliders();
	
	function fixSlider($sliderSlick, $Timer) {
		var slider = $('.' + $sliderSlick);
		$Timer = setInterval(function () {
			var $sliderSlick = $('body').find(slider);
			if ($sliderSlick.hasClass('slick-initialized')) {
				$sliderSlick.find('.slick-dots').wrap('<div class="dots_wrapper"<>/div>');
				$sliderSlick.removeClass('hidden_slider');
				clearInterval($Timer);
			}
		}, 10);
	}
	
	$('.modal_gallery_slider').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		arrows: true,
		dots:false,
		fade: true,
		draggable: false,
		asNavFor: '.modal_gallery_slider_nav'
	});
	
	$('.modal_gallery_slider_nav').slick({
		slidesToShow: 8,
		slidesToScroll: 1,
		dots: false,
		arrows: false,
		draggable: false,
		focusOnSelect: true,
		centerMode: false,
		asNavFor: '.modal_gallery_slider',
		responsive: [
			{
				breakpoint: 1201,
				settings: {
					slidesToShow: 6,
					slidesToScroll: 1
				}
			},
			{
				breakpoint: 993,
				settings: {
					slidesToShow: 4,
					slidesToScroll: 1
				}
			},
			{
				breakpoint: 551,
				settings: {
					slidesToShow: 3,
					slidesToScroll: 1
				}
			},
			{
				breakpoint: 401,
				settings: {
					slidesToShow: 2,
					slidesToScroll: 1
				}
			}
		]
	});
	
	var sliderDescHeight = $('.modal_gallery_slider .img_wrap').innerHeight();
	var sliderArrow = $('.modal_gallery_slider .slick-arrow');
	var sliderArrowHeight = sliderDescHeight / 2;
	
	sliderArrow.css('top', sliderArrowHeight);
}

Please, enter a valid value