Как повторить анимацию смены слайдов в попапе?
как тут - http://ubc-build.com.ua/gallery/gallery_2/tm_pg_album/green-hills/
(попап появляется после клика на картинку в галерее)
$(document).ready(function() {
if ($('#thumbnails-gallery').length > 0) {
window.lightGallery(
document.getElementById("thumbnails-gallery"), {
plugins: [lgAutoplay, lgFullscreen, lgThumbnail],
autoplayFirstVideo: false,
autoplay: true,
autoplayControls: true,
counter: false,
addClass: 'port-gallery',
download: true,
controls: true,
mobileSettings: {
controls: true,
download: true,
showCloseIcon: true,
rotate: true,
}
}
);
}
})
.portfolio {
position: relative;
z-index: 5;
background-color: #fff;
padding-bottom: 75px;
}
.portfolio__wrap {
display: flex;
flex-wrap: wrap;
margin-top: 30px;
}
.portfolio__item {
cursor: pointer;
position: relative;
overflow: hidden;
display: block;
width: calc(100% / 3);
background-repeat: no-repeat;
background-size: cover;
min-height: 400px;
transition-delay: .05s;
}
.portfolio__item:after {
position: absolute;
content: ' ';
width: 1px;
height: 100%;
top: 0;
left: 0;
transition: 0.3s background-color;
}
.portfolio__item:hover:after {
width: 100%;
background: rgba(0, 0, 0, 0.9);
animation: hide 1s forwards;
transition: 0.4s linear;
}
.portfolio__item:hover img {
filter: none;
transform: translateX(-20px);
}
.portfolio__item:hover .portfolio__label,
.portfolio__item:hover .portfolio__title,
.portfolio__item:hover .portfolio__desc,
.portfolio__item:hover .portfolio__count {
opacity: 1;
transform: translateX(0%);
}
.portfolio__item:hover .portfolio__icon i {
opacity: 1;
animation: swing 1s linear forwards;
}
.portfolio__image {
position: absolute;
content: ' ';
top: 0px;
left: 0px;
width: calc(100% + 40px);
height: 100%;
}
.portfolio__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%);
transition: 0.3s filter, 0.3s transform;
}
.portfolio--page {
padding-top: 78px;
padding-bottom: 70px;
}
.portfolio--page .portfolio__wrap {
margin: 0 -3px;
}
.portfolio--page .portfolio__item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: calc(100% / 3 - 6px);
margin: 0 3px;
margin-bottom: 6px;
}
.portfolio__name {
font-size: 20px;
line-height: 1.3;
color: #20202c;
letter-spacing: 0.8px;
text-align: center;
padding-bottom: 25px;
font-weight: 800;
}
.portfolio__place {
font-size: 14px;
line-height: 1.6;
color: #686868;
text-align: center;
padding-bottom: 25px;
font-weight: 300;
}
.portfolio--about {
padding-top: 70px;
padding-bottom: 40px;
}
.port-gallery .lg-outer .lg-thumb-item {
border: none;
border-radius: 0px;
outline: none;
transition: 0.3s opacity;
}
.port-gallery .lg-outer .lg-thumb-item.active {
opacity: 0.2;
}
.port-gallery .lg-outer .lg-thumb-item:hover {
opacity: 0.2;
}
.port-gallery .lg-outer .lg-prev:after,
.port-gallery .lg-outer .lg-next:before {
position: relative;
color: #fff;
font-size: 12px;
top: -4px;
font-family: 'nc-icon-mini';
transition: 0.3s color;
}
.port-gallery .lg-outer .lg-prev:after {
content: '\e903';
}
.port-gallery .lg-outer .lg-prev:hover {
background-color: #fff;
}
.port-gallery .lg-outer .lg-prev:hover:after {
color: #68bec4;
}
.port-gallery .lg-outer .lg-next:before {
content: '\e904';
margin-left: 2px;
}
.port-gallery .lg-outer .lg-next:hover {
background-color: #fff;
}
.port-gallery .lg-outer .lg-next:hover:before {
color: #68bec4;
}
.port-gallery .lg-prev,
.port-gallery .lg-next {
width: 44px;
height: 44px;
background-color: #68bec4;
border-radius: 50%;
transition: 0.3s background-color;
}
.port-gallery .lg-progress-bar .lg-progress {
background-color: #68bec4;
}
.port-gallery .lg-group {
display: flex;
flex-direction: row-reverse;
align-items: center;
margin-top: 5px;
}
.port-gallery .lg-toolbar .lg-icon {
display: block;
float: none;
width: 14px;
font-size: 14px;
margin: 0 8px;
color: #fff;
}
.port-gallery .lg-toolbar .lg-icon:hover {
color: #68bec4;
}
.port-gallery .lg-img-wrap {
padding: 0 5px;
}
.port-gallery .lg-outer .lg-icon {
font-family: 'nc-icon-mini' !important;
}
.port-gallery .lg-outer .lg-icon.lg-fullscreen:after {
content: '\ea83';
}
.port-gallery .lg-outer .lg-icon.lg-download:after {
content: '\e95d';
}
.port-gallery .lg-outer .lg-icon.lg-close:after {
content: '\ea18';
}
.port-gallery .lg-outer .lg-icon.lg-autoplay-button:after {
content: '\ec0f';
}
.port-gallery .lg-outer .lg-thumb-outer {
display: flex;
justify-content: center;
background-color: transparent;
}
.port-gallery .lg-backdrop {
background-color: rgba(32, 32, 44, 0.85);
}
@media screen and (max-width: 1199px) {
.portfolio__name {
font-size: 15px;
}
}
@media screen and (max-width: 1050px) {
.portfolio__item {
width: calc(100% / 2);
}
.portfolio--page .portfolio__item {
width: calc(100% / 2 - 6px);
}
}
@media screen and (max-width: 780px) {
.portfolio__item {
width: 100%;
}
.portfolio--page .portfolio__wrap {
margin: 0px;
}
.portfolio--page .portfolio__item {
width: 100%;
margin: 0px;
margin-bottom: 6px;
}
}
@keyframes swing {
0% {
transform: rotate(-30deg);
}
30% {
transform: rotate(30deg);
}
50% {
transform: rotate(-20deg);
}
70% {
transform: rotate(20deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes hide {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/autoplay/lg-autoplay.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/thumbnail/lg-thumbnail.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/fullscreen/lg-fullscreen.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lightgallery.umd.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/lg-autoplay.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/lg-thumbnail.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/lightgallery.css" rel="stylesheet"/>
<section class="portfolio portfolio--page">
<div class="portfolio__wrap" id="thumbnails-gallery">
<div class="portfolio__item" data-src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg">
<div class="portfolio__image">
<img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" alt="">
</div>
</div>
<div class="portfolio__item" data-src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
<div class="portfolio__image">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="">
</div>
</div>
</div>
</section>