Как повторить анимацию смены слайдов в попапе?

как тут - 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>


Ответы (0 шт):