/home/henzagold/site/components/ Current File: //home/henzagold/site/components/slider.vue
<template>
  <div>

    <modal v-model="showModal">
      <template v-slot:content>
        <div class="product-zoom-image-mobile" style="margin: 15%">
          <img
            id="zoom_inner"
            :src="modal_imageSrc"
            :data-zoom-image="modal_imageSrc"
             data-not-lazy/>
        </div>
        <p>برای بزرگنمایی تصویر با انگشت بر روی تصویر بکشید</p>


      </template>
    </modal>

    <div class="detail-page-slider-for" >
      <div class="slide-item" v-for="(item,index) in gallery" :key="`slide_item_${index}`"
           @click="showMobileZoom(item.image)">
        <div class="product-zoom-image slider-border">
          <img class="zoom_01" :src="item.image" :alt="productTitle" :data-zoom-image="item.image"
               @mouseenter="handleMouseEnter()" @mouseleave="handleMouseLeave()"
           data-not-lazy>
        </div>
      </div>

    </div>

    <div class="detail-page-slider-nav mt-3" id="silder_item">
      <div class="slide-item " v-for="(item,index) in gallery">
        <div class="slider-border">
          <a href="javascript:void(0)">
            <img :src="item.image" class="full-width" :alt="productTitle" style="width: 90px;height: 90px"
             data-not-lazy @click="$emit('change',item)">
          </a>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import Modal from "@/components/Modal";

export default {
  name: "slider",
  components: {
    Modal
  },
  props: {
    gallery: Array,
    productTitle: String,
  },
  data() {
    return {
      showModal: false,
      modal_imageSrc: null,
    }
  },
  methods: {
    handleMouseLeave() {

      document.querySelector('.shop-detail-wrapper').style.zIndex = "2";
    },
    handleMouseEnter() {

      document.querySelector('.shop-detail-wrapper').style.zIndex = "-2";

    },
    showMobileZoom(src) {

      this.modal_imageSrc = src;

      this.$nextTick(() => {
        if ($(window).width() < 769) {

          $('.product-zoom-image-mobile').trigger('zoom.destroy');
          $(".product-zoom-image-mobile")
            .wrap(
              '<span style="display:inline-block" class="product-single-zoom"></span>'
            )
            .css("display", "block")
            .parent()
            .zoom();

          this.showModal = true;
        }
      });
    },
  },
  mounted() {
    this.body = this.gallery[0].body
    $('.detail-page-slider-for').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      rtl: true,
      arrows: false,
      asNavFor: '.detail-page-slider-nav'
    });
    $('.detail-page-slider-nav').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
      rtl: true,
      asNavFor: '.detail-page-slider-for',
      arrows: false,
      dots: false,
      focusOnSelect: true,
      responsive: [{
        breakpoint: 567,
        settings: {
          slidesToShow: 3,
        }
      },

      ]
    });
  }
}
</script>

<style scoped>
</style>