Как вернуться к элементу после закрытия Fancybox?

Question

[Abdul Amenov]

Всем привет!
У меня есть слайдер который построен на slick carousel и еще в нем я использую fancybox.

Когда я открываю картинку слайда в fancybox и когда полистаю в нем туда сюда и возвращаюсь картинка слайда становится той которая была последняя в fancybox.

Мне это по идеи и нужно было, но дело в том что DOM дерево не меняется и активный класс не переназначается у slick carousel.

Как пофиксить?

Ссылка на сайт: https://secret-dusk-68716.herokuapp.com/

Answer 1

[webdevleon]

Ты нашел ответ на вопрос? у меня просто таже проблема

Comments

[Abdul Amenov]

<template>
  <div class="slider">
    <div class="slider-item" v-for="(item, index) in images" :key="index">
      <a :href="item" class="slider-item-link">
        <img :src="item" class="slider-item-image" />
      </a>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    images: {
      type: Array
    }
  },
  mounted() {
    $(document).ready(function() {
      $(".slider").slick({
        arrows: false,
        dots: true
      });

      $(".slider-item-link").fancybox({
        loop: true,
        selector: ".slick-slide:not(.slick-cloned) > a ",
        backFocus: false,
        afterShow: function(instance) {
          $(".slider").slick("slickGoTo", instance.currIndex);
        }
      });
    });
  }
};
</script>

<style lang="scss">
.slider {
  position: relative;

  &-item {
    position: relative;

    &-image {
      width: 100%;
    }

    &::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 45px;
      z-index: 1;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
    }
  }

  .slick {
    &-list {
      overflow: hidden;
    }

    &-track {
      display: flex;
    }

    &-dots {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      list-style: none;
      display: flex;
      padding-left: 0;
      margin-bottom: 0;
      align-items: center;
      padding: 7.5px;
      z-index: 2;

      li {
        height: 6px;
        width: 6px;
        background-color: #fff;
        border-radius: 50%;
        transition: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.21);

        & + li {
          margin-left: 0.3rem;
        }

        &.slick-active {
          height: 7px;
          width: 7px;
          background-color: #ebff92;
        }

        button {
          display: none;
        }
      }
    }
  }
}

.fancybox-bg {
  background-color: #000;
  opacity: 1 !important;
}
</style>

[webdevleon]

Абдулсалам Аменов, блин, друже, спасибо огромное выручил )