FancyBox install files:
Gallery Slider
FancyBox
PHP
<section class="gallery">
<div class="wrapper">
<div class="gallery_slider || hidden_slider" data-slider="gallery_slider">
<?php for ($i = 1; $i < 15; $i++) :?>
<div>
<a data-fancybox="gallery" data-width="1200" href="/img/gallery_img_<?= $i?>.jpg" class="img_wrap">
<img src="/img/gallery_img_<?= $i?>.jpg" alt="">
</a>
</div>
<?php endfor ;?>
</div>
<div class="gallery_slider_nav || hidden_slider" data-slider="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>
</section>CSS
.gallery .gallery_slider{margin:0 0 1rem}
.gallery .gallery_slider.hidden_slider{opacity:0;overflow:hidden;max-height:58rem}
.gallery .gallery_slider .slick-prev,.gallery .gallery_slider .slick-next{width:8rem;height:8rem}
.gallery .gallery_slider .slick-prev::after,.gallery .gallery_slider .slick-next::after{border-color:#000;width:8rem;height:8rem}
.gallery .gallery_slider .slick-prev{left:-11.5rem}
.gallery .gallery_slider .slick-next{right:-11.5rem}
.gallery .gallery_slider .img_wrap{display:block;padding-top:49.8%;overflow:hidden;position:relative}
.gallery .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;\A'}
.gallery .gallery_slider_nav{width:-webkit-calc(100% - 21.2rem);width:-moz-calc(100% - 21.2rem);width:calc(100% - 21.2rem);margin:0 auto}
.gallery .gallery_slider_nav.hidden_slider{opacity:0;overflow:hidden;max-height:10rem}
.gallery .gallery_slider_nav .slider_item{position:relative;cursor:pointer;width:90%;height:9.6rem;margin:0 auto;overflow:hidden;-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}
.gallery .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%;-o-object-fit:cover;object-fit:cover;font-family:'object-fit: cover;\A '}
.gallery .gallery_slider_nav .slick-prev,.gallery .gallery_slider_nav .slick-next{position:absolute;top:0;width:9.6rem;height:100%;background-color:#f15929;color:#fff;text-align:center;-webkit-transition:all .2s linear;-o-transition:all .2s linear;-moz-transition:all .2s linear;transition:all .2s linear;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}
.gallery .gallery_slider_nav .slick-prev::before,.gallery .gallery_slider_nav .slick-next::before{position:absolute;font-size:1.9rem;text-transform:uppercase;top:5.2rem;left:50%;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0)}
.gallery .gallery_slider_nav .slick-prev::after,.gallery .gallery_slider_nav .slick-next::after{content:"";position:absolute;top:2.3rem;left:50%;background-image:url(/img/arrowSlide.png);background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-position:center;width:2.5rem;height:2.5rem;vertical-align:unset;border:none;border-width:unset}
.gallery .gallery_slider_nav .slick-prev{left:-10.5rem}
.gallery .gallery_slider_nav .slick-prev::before{content:"Prev"}
.gallery .gallery_slider_nav .slick-prev::after{-webkit-transform:translate(-50%,0) rotate(180deg);-moz-transform:translate(-50%,0) rotate(180deg);-ms-transform:translate(-50%,0) rotate(180deg);-o-transform:translate(-50%,0) rotate(180deg);transform:translate(-50%,0) rotate(180deg)}
.gallery .gallery_slider_nav .slick-next{right:-10.5rem}
.gallery .gallery_slider_nav .slick-next::before{content:"Next"}
.gallery .gallery_slider_nav .slick-next::after{-webkit-transform:translate(-50%,0) rotate(360deg);-moz-transform:translate(-50%,0) rotate(360deg);-ms-transform:translate(-50%,0) rotate(360deg);-o-transform:translate(-50%,0) rotate(360deg);transform:translate(-50%,0) rotate(360deg)}
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
.gallery .gallery_slider_nav .slick-prev:hover,.gallery .gallery_slider_nav .slick-next:hover{background-color:#21244f}
}
@media only screen and (max-width: 1500px) {
.gallery .gallery_slider .slick-next{right:-4.5rem}
.gallery .gallery_slider .slick-prev{left:-4.5rem}
.gallery .gallery_slider .slick-prev::after,.gallery .gallery_slider .slick-next::after{width:6rem;height:6rem}
.gallery .gallery_slider .slick-prev,.gallery .gallery_slider .slick-next{width:6rem;height:6rem}
}
@media only screen and (max-width: 767px) {
.gallery .gallery_slider_nav{width:-webkit-calc(100% - 14rem);width:-moz-calc(100% - 14rem);width:calc(100% - 14rem)}
.gallery .gallery_slider_nav .slider_item{height:7rem}
.gallery .gallery_slider_nav .slick-prev,.gallery .gallery_slider_nav .slick-next{width:7rem}
.gallery .gallery_slider_nav .slick-prev{left:-7rem}
.gallery .gallery_slider_nav .slick-next{right:-7rem}
.gallery .gallery_slider_nav .slick-prev::before,.gallery .gallery_slider_nav .slick-next::before{font-size:1.4rem;top:4.2rem}
.gallery .gallery_slider_nav .slick-prev::after,.gallery .gallery_slider_nav .slick-next::after{-webkit-background-size:2rem 2rem;-moz-background-size:2rem 2rem;-o-background-size:2rem 2rem;background-size:2rem 2rem;width:2rem;height:2rem;top:1.6rem}
}SCSS
.gallery {
.gallery_slider {
margin: 0 0 1rem;
&.hidden_slider {
opacity: 0;
overflow: hidden;
max-height: 58rem;
}
.slick-prev, .slick-next {
width: 8rem;
height: 8rem;
}
.slick-prev::after, .slick-next::after {
border-color: #000;
width: 8rem;
height: 8rem;
}
.slick-prev {
left: -11.5rem;
}
.slick-next {
right: -11.5rem;
}
.img_wrap {
display: block;
padding-top: 49.8%;
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;';
}
}
}
.gallery_slider_nav {
width: calc(100% - 21.2rem);
margin: 0 auto;
&.hidden_slider {
opacity: 0;
overflow: hidden;
max-height: 10rem;
}
.slider_item {
position: relative;
cursor: pointer;
width: 90%;
height: 9.6rem;
margin: 0 auto;
overflow: hidden;
transition: .3s linear;
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;';
}
}
.slick-prev, .slick-next {
position: absolute;
top: 0;
width: 9.6rem;
height: 100%;
background-color: #f15929;
color: #fff;
text-align: center;
transition: all .2s linear;
transform: none;
}
.slick-prev::before, .slick-next::before {
position: absolute;
font-size: 1.9rem;
text-transform: uppercase;
top: 5.2rem;
left: 50%;
transform: translate(-50%, 0);
}
.slick-prev::after, .slick-next::after {
content: "";
position: absolute;
top: 2.3rem;
left: 50%;
background-image: url(/img/arrowSlide.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 2.5rem;
height: 2.5rem;
vertical-align: unset;
border: none;
border-width: unset;
}
.slick-prev {
left: -10.5rem;
&::before {
content: "Prev";
}
&::after {
transform: translate(-50%, 0) rotate(180deg);
}
}
.slick-next {
right: -10.5rem;
&::before {
content: "Next";
}
&::after {
transform: translate(-50%, 0) rotate(360deg);
}
}
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
.gallery .gallery_slider_nav .slick-prev:hover, .gallery .gallery_slider_nav .slick-next:hover {background-color: #21244f;}
}
@media only screen and (max-width:1500px) {
.gallery .gallery_slider .slick-next {right: -4.5rem}
.gallery .gallery_slider .slick-prev {left: -4.5rem}
.gallery .gallery_slider .slick-prev::after, .gallery .gallery_slider .slick-next::after {width: 6rem;height: 6rem}
.gallery .gallery_slider .slick-prev, .gallery .gallery_slider .slick-next {width: 6rem;height: 6rem}
}
@media only screen and (max-width:767px) {
.gallery .gallery_slider_nav {width: calc(100% - 14rem)}
.gallery .gallery_slider_nav .slider_item {height: 7rem}
.gallery .gallery_slider_nav .slick-prev, .gallery .gallery_slider_nav .slick-next {width: 7rem}
.gallery .gallery_slider_nav .slick-prev {left: -7rem}
.gallery .gallery_slider_nav .slick-next {right: -7rem}
.gallery .gallery_slider_nav .slick-prev::before, .gallery .gallery_slider_nav .slick-next::before {font-size: 1.4rem;top: 4.2rem}
.gallery .gallery_slider_nav .slick-prev::after, .gallery .gallery_slider_nav .slick-next::after {background-size: 2rem 2rem;width: 2rem;height: 2rem;top: 1.6rem}
}JavaScript
$('.gallery_slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
draggable: false,
asNavFor: '.gallery_slider_nav',
responsive: [
{
breakpoint: 1401,
settings: {
arrows: false
}
}
]
});
$('.gallery_slider_nav').slick({
slidesToShow: 8,
slidesToScroll: 1,
dots: false,
arrows: true,
draggable: false,
focusOnSelect: true,
centerMode: false,
asNavFor: '.gallery_slider',
responsive: [
{
breakpoint: 1101,
settings: {
slidesToShow: 6,
slidesToScroll: 1
}
},
{
breakpoint: 860,
settings: {
slidesToShow: 4,
slidesToScroll: 1
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 6,
slidesToScroll: 1
}
},
{
breakpoint: 650,
settings: {
slidesToShow: 4,
slidesToScroll: 1
}
},
{
breakpoint: 501,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 401,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}
]
});