<div class="gallery-overlay is-open">
<div class="gallery-overlay-dimmer"></div>
<div class="gallery-overlay-content">
<button class="gallery-overlay-close">
<i class="fal fa-times "></i>
</button>
<div class="gallery-overlay-slider">
<div class="image-gallery-item">
<img class="image" src="https://images.unsplash.com/photo-1503428593586-e225b39bddfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
</div>
<div class="image-gallery-item">
<img class="image" src="https://images.unsplash.com/photo-1560439514-4e9645039924?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" alt="">
</div>
<div class="image-gallery-item">
<img class="image" src="https://images.unsplash.com/photo-1561489396-888724a1543d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
</div>
<div class="image-gallery-item">
<img class="image" src="https://images.unsplash.com/photo-1472691681358-fdf00a4bfcfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80" alt="">
</div>
<div class="image-gallery-item">
<img class="image" src="https://images.unsplash.com/photo-1505373877841-8d25f7d46678?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="">
</div>
<div class="image-gallery-item">
<img class="image" src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
</div>
</div>
</div>
</div>
<div class="gallery-overlay {% if is_open == true %}is-open{% endif %}">
<div class="gallery-overlay-dimmer"></div>
<div class="gallery-overlay-content">
<button class="gallery-overlay-close">
{% render "@components/01-core/icon/icon.twig" with {
icon_type: 'fal',
icon_id: 'fa-times'
} %}
</button>
<div class="gallery-overlay-slider">
{% for item in items %}
<div class="image-gallery-item">
<img class="image" src="{{ item }}" alt="">
</div>
{% endfor %}
</div>
</div>
</div>
{
"is_open": true,
"items": [
"https://images.unsplash.com/photo-1503428593586-e225b39bddfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80",
"https://images.unsplash.com/photo-1560439514-4e9645039924?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80",
"https://images.unsplash.com/photo-1561489396-888724a1543d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80",
"https://images.unsplash.com/photo-1472691681358-fdf00a4bfcfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80",
"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80",
"https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
]
}
$('.gallery-overlay .gallery-overlay-slider').slick({
infinite: false,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: false,
adaptiveHeight: true,
mobileFirst: true,
dots: false,
arrows: true,
swipe: false,
prevArrow: '<button class="slider-btn-prev"><i class="fal fa-angle-left"></i></button>',
nextArrow: '<button class="slider-btn-next"><i class="fal fa-angle-right"></i></button>',
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
.gallery-overlay-open {
position: absolute;
bottom: 2rem;
right: 2rem;
border: none;
background: none;
font-size: 5rem;
svg {
color: $color-grey;
}
}
.gallery-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease-in-out;
&.is-open {
opacity: 1;
pointer-events: all;
}
.gallery-overlay-dimmer {
background: rgba(#fff, 0.8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.gallery-overlay-content {
padding: 4rem 0;
position: relative;
z-index: 3;
color: #fff;
max-width: 90%;
@extend .text-base;
@include media-breakpoint-up(lg) {
padding: 6rem 0;
}
b {
color: $primary;
@extend .text-medium;
font-style: italic;
}
.gallery-overlay-close {
background: none;
border: none;
color: $primary;
opacity: 0.8;
position: absolute;
right: 0;
top: 0;
font-size: 3.4rem;
outline: none;
z-index: 10;
&:hover {
opacity: 1;
}
}
.gallery-overlay-slider {
padding: 0 6rem;
.slider-btn-prev {
right: auto;
left: 0;
background: none;
height: 10rem;
width: 6rem;
cursor: pointer;
svg {
color: inherit;
font-size: 10rem;
}
}
.slider-btn-next {
right: 0;
left: auto;
background: none;
height: 10rem;
width: 6rem;
cursor: pointer;
svg {
color: inherit;
font-size: 10rem;
}
}
.image-gallery-item {
img {
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 80vh;
width: auto;
height: auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border: 1px solid #fff;
}
}
}
}
}
There are no notes for this item.