ShowEasyFrontEnd/FrontEnd/components/home/TrendingDestinationServices.vue

<template>
  <section class="trending-destination-services xl:tw-max-w-full xl:tw-mx-auto">
    <div class="swiper-container trendingDestinationServices" ref="trendingDestinationServices">
      <div :class="['swiper-wrapper']">
        <div v-for="(theme, idx) in themes" :key="idx" @mouseover="hoverCardIdx = idx"
          :class="['swiper-slide tw-relative tw-h-[164px] tw-bg-cover tw-bg-no-repeat  tw-rounded-[8px] tw-transition-all tw-duration-200 tw-ease-in-out md:tw-h-[224px]', hoverCardIdx == idx ? 'xl:tw-w-[28%]' : 'xl:tw-w-[16.8%]']"
          :style="{ 'background-image': 'url(' + theme.image + ')' }">
          <nuxt-link class="tw-block tw-w-full tw-h-full tw-text-white" :to="localePath(destinations[idx])">
            <div
              class="overlap tw-absolute tw-left-0 tw-bottom-0 tw-w-full tw-h-1/2 tw-bg-gradient-to-b tw-from-transparent tw-to-black tw-rounded-[8px]">
            </div>
            <div class="tw-absolute tw-bottom-[12px] tw-left-[12px] tw-text-white xl:t18">{{ theme.name }}</div>
          </nuxt-link>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
// taipei 7
// tokyo 21
// frankfurt 76
// las vegas 57
// ho chi min 31
import Swiper from "swiper/bundle";
export default {
  delimiters: ['${', '}'],
  components: {
    Swiper
  },
  props: {
    themes: {
      type: Array,
    },
    title: {
      type: String,
    },
  },
  created() {
    if (this.$props.themes.length > 5) {
      this.$props.themes = this.$props.themes.slice(0, 5);
    }
  },
  data() {
    return {
      hoverCardIdx: 0,
      slide: null,
      trendingDestinationServicesSwiper: null,
      destinations: [
        "/exhibition?city=7",
        "/exhibition?city=21",
        "/exhibition?city=76",
        "/exhibition?city=57",
        "/exhibition?city=31",
      ],
    };
  },
  mounted() {
    let vm = this;
    vm.$nextTick(function () {
      vm.trendingDestinationServicesSwiper = new Swiper(".swiper-container.trendingDestinationServices", {
        direction: "horizontal",
        initialSlide: 0,
        slidesPerView: 2.2,
        slidesPerGroup: 2,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        spaceBetween: 15,
        preloadImages: false,
        lazy: {
          loadPrevNext: true,
          loadOnTransitionStart: true,
          loadPrevNextAmount: 3,
        },
        breakpoints: {
          768: {
            slidesPerView: 2.5,
          },
          1366: {
            slidesPerView: 5,
            allowTouchMove: false,
          },
        },
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.swiper-slide {
  background-position: 50%;
}

.card-text {
  position: absolute;
  bottom: 0%;
  left: 10%;
}

.span {
  transition: transform 0.2s;
}

.v-slide-group__wrapper {
  touch-action: auto !important;
}
</style>