Gallery Slider Vertical

FancyBox

Documentation

FancyBox install files:

PHP

<section class="gallery_vertical">
	<div class="wrapper">
		<div class="row_f">
			<div class="col_9 || col_xs_12">
				<div class="gallery_slider_v hidden_slider" data-slider="gallery_slider_v">
					<?php for ($i = 1; $i < 15; $i++) :?>
						<div>
							<a href="/img/gallery_img_<?= $i?>.jpg" data-fancybox="images" data-width="2000" data-caption="Fish Art Restaurant" class="img_wrap">
								<img src="/img/gallery_img_<?= $i?>.jpg" alt="Fish Art Restaurant">
							</a>
						</div>
					<?php endfor;?>
				</div>
			</div>
			<div class="col_3 || col_xs_12">
				<div class="gallery_slider_vnav hidden_slider" data-slider="gallery_slider_vnav">
					<?php for ($i = 1; $i < 15; $i++) :?>
						<div>
							<div class="img_wrap">
								<img src="/img/gallery_img_<?= $i?>.jpg" alt="Fish Art Restaurant">
							</div>
						</div>
					<?php endfor;?>
				</div>
			</div>
		</div>
	</div>
</section>

CSS

.gallery_slider_v.hidden_slider{opacity:0;overflow:hidden;max-height:58rem}
.gallery_slider_v .img_wrap{display:block;overflow:hidden;position:relative;padding-top:67%;margin:.9rem 0 .8rem}
.gallery_slider_v .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:contain;object-fit:contain;font-family:"object-fit: contain;\A	"}
.gallery_slider_vnav.hidden_slider{opacity:0;overflow:hidden;max-height:58rem}
.gallery_slider_vnav .img_wrap{display:block;overflow:hidden;position:relative;padding-top:67%;margin:.95rem 0;cursor:pointer}
.gallery_slider_vnav .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:contain;object-fit:contain;font-family:"object-fit: contain;\A	"}

@media only screen and (max-width: 640px) {
	.gallery_slider_vnav .img_wrap{margin:0 .5rem}
	.gallery_slider_v .img_wrap{margin:.9rem .4rem .5rem .5rem}
	.gallery_slider_v.hidden_slider {max-height: 41rem;}
	.gallery_slider_vnav.hidden_slider{max-height:8rem}
}

SCSS

.gallery_slider_v {
	&.hidden_slider {
		opacity: 0;
		overflow: hidden;
		max-height: 58rem;
	}
	
	.img_wrap {
		display: block;
		overflow: hidden;
		position: relative;
		padding-top: 67%;
		margin: 0.9rem 0 .8rem;
		
		img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: block;
			width: 100%;
			height: 100%;
			object-fit: contain;
			font-family: "object-fit: contain;";
		}
	}
}

.gallery_slider_vnav {
	&.hidden_slider {
		opacity: 0;
		overflow: hidden;
		max-height: 58rem;
	}
	
	.img_wrap {
		display: block;
		overflow: hidden;
		position: relative;
		padding-top: 67%;
		margin: 0.95rem 0 .95rem;
		cursor: pointer;
		
		img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: block;
			width: 100%;
			height: 100%;
			object-fit: contain;
			font-family: "object-fit: contain;";
		}
	}
}

@media only screen and (max-width:640px) {
	.gallery_slider_vnav .img_wrap {margin: 0 .5rem;}
	.gallery_slider_v .img_wrap {margin: 0.9rem 0.4rem .5rem .5rem;}
	.gallery_slider_v.hidden_slider {max-height: 41rem;}
	.gallery_slider_vnav.hidden_slider {max-height: 8rem;}
}

JavaScript

$('.gallery_slider_v').slick({
	slidesToShow: 1,
	slidesToScroll: 1,
	arrows: false,
	dots: false,
	fade: true,
	draggable: false,
	asNavFor: '.gallery_slider_vnav'
});

$('.gallery_slider_vnav').slick({
	slidesToShow: 3,
	slidesToScroll: 1,
	dots: false,
	arrows: false,
	draggable: true,
	vertical: true,
	verticalSwiping: true,
	focusOnSelect: true,
	centerMode: false,
	asNavFor: '.gallery_slider_v',
	responsive: [
		{
			breakpoint: 641,
			settings: {
				slidesToShow: 4,
				slidesToScroll: 1,
				vertical: false,
				verticalSwiping: false
			}
		}
	]
});