ShowEasyFrontEnd/FrontEnd/components/swiper/serviceContent.vue

<template>
  <div id="serviceSlideshow" :class="[
    'swiper-container service md:tw-max-w-[1246px] md:tw-mx-auto',
    multipleBanner ? '' : 'tw-pointer-events-none',
  ]" ref="slideshow" @mouseenter="enter" @mouseleave="leave">
    <div class="swiper-wrapper">
      <div class="swiper-slide tw-max-h-[232px] tw-overflow-y-hidden md:tw-max-h-[300px] xl:tw-max-h-[540px]"
        v-for="item in banners" :key="item.banner_id">
        <!-- <img :data-src="item.image" class="swiper-lazy" /> -->
        <img :src="item.image" class="swiper-lazy" />
      </div>
    </div>
    <div class="swiper-pagination service"></div>
    <div class="swiper-button-prev service tw-hidden xl:tw-block"></div>
    <div class="swiper-button-next service tw-hidden xl:tw-block"></div>
  </div>
</template>
<script>
import Swiper from "swiper/bundle";
import lazyImg from "@/components/img/img.vue";
export default {
  props: {
    banners: {
      type: Array,
      required: false,
      default: [],
    },
  },
  components: { Swiper, lazyImg },
  data() {
    return {
      slideshow: null,
    };
  },
  mounted() {
    let vm = this;
    vm.$nextTick(function () {
      if (vm.banners.length > 1) {
        vm.slideshow = new Swiper("#serviceSlideshow", {
          speed: 400,
          initialSlide: 0,
          autoHeight: false,
          direction: "horizontal",
          loop: true,
          autoplay: {
            delay: 5000,
            disableOnInteraction: true,
            waitForTransition: false,
          },
          preloadImages: false,
          lazy: {
            loadPrevNext: true,
            loadOnTransitionStart: true,
            loadPrevNextAmount: 6,
          },
          autoplayStopOnLast: false, // loop false also
          effect: "slide",
          slidesPerView: "auto",
          centeredSlides: true,
          loopedSlides: 0,
          slidesPerGroup: 1,
          slidesOffsetBefore: 0,
          grabCursor: true,
          pagination: {
            el: ".swiper-pagination.service",
            clickable: true,
          },
          navigation: {
            nextEl: ".swiper-button-next.service",
            prevEl: ".swiper-button-prev.service",
          },
        });
      } else {
        vm.slideshow = new Swiper("#serviceSlideshow", {
          speed: 400,
          initialSlide: 0,
          autoHeight: false,
          direction: "horizontal",
          loop: true,
          preloadImages: false,
          lazy: {
            loadPrevNext: true,
            loadOnTransitionStart: true,
            loadPrevNextAmount: 6,
          },
          autoplayStopOnLast: false, // loop false also
          effect: "slide",
          slidesPerView: "auto",
          centeredSlides: true,
          loopedSlides: 0,
          slidesPerGroup: 1,
          slidesOffsetBefore: 0,
          grabCursor: true,
        });
      }
      vm.slideshow.init();
      vm.slideshow.update();
    });
  },
  computed: {
    multipleBanner() {
      if (this.banners.length > 1) {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    enter() {
      if (this.banners.length > 1) {
        this.slideshow.autoplay.stop();
      }
    },
    leave() {
      if (this.banners.length > 1) {
        this.slideshow.autoplay.start();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.swiper-container.service:deep() {
  @media screen and (min-width: 768px) {
    padding: 0 100px;
  }

  @media screen and (min-width: 1366px) {
    padding: 0 143px;
  }
}

.swiper-container.service:hover:deep() {
  .swiper-button {
    &-prev {
      opacity: 1;
      transform: translateX(0);
    }

    &-next {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

.swiper-container:deep() {
  .swiper-slide {
    width: 100% !important;

    @media screen and (min-width: 768px) {
      margin: 0 20px;
      max-height: 300px;
      overflow-y: hidden;
    }

    @media screen and (min-width: 1366px) {
      margin: 0 30px;
      max-height: 540px;
    }

    >img {
      width: 100%;
      height: auto;
    }
  }

  .swiper-slide-prev,
  .swiper-slide-next {
    transition: all 0.5s linear;
    filter: opacity(0.5);
  }

  .swiper-button {
    &-prev {
      color: transparent;
      top: 60%;
      left: 40px;
      width: 20px;
      height: 20px;
      opacity: 0;
      transform: translateX(-10px);
      transition: all 0.3s linear;

      &:after {
        display: block;
        background-image: url("~/assets/svg/Arrow-left.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        width: 20px;
        height: 20px;
      }

      @media screen and (min-width: 768px) {
        top: 55%;
        left: 120px;
        width: 30px;
        height: 30px;

        &:after {
          width: 30px;
          height: 30px;
        }
      }

      @media screen and (min-width: 1366px) {
        top: 50%;
        left: 163px;
        width: 50px;
        height: 50px;

        &:after {
          width: 50px;
          height: 50px;
        }
      }
    }

    &-next {
      color: transparent;
      top: 60%;
      right: 40px;
      opacity: 0;
      width: 20px;
      height: 20px;
      transform: translateX(10px);
      transition: all 0.5s linear;

      &:after {
        display: block;
        background-image: url("~/assets/svg/Arrow-left.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        transform: rotate(180deg);
        width: 20px;
        height: 20px;
      }

      @media screen and (min-width: 768px) {
        top: 55%;
        right: 120px;
        width: 30px;
        height: 30px;

        &:after {
          width: 30px;
          height: 30px;
        }
      }

      @media screen and (min-width: 1366px) {
        top: 50%;
        right: 163px;
        width: 50px;
        height: 50px;

        &:after {
          width: 50px;
          height: 50px;
        }
      }
    }
  }

  .swiper-pagination-bullets {
    @media screen and (min-width: 768px) {
      bottom: 20px;
    }
  }
}

.swiper-container:deep() {
  .swiper-pagination-bullet {
    opacity: 1;
    background-color: #fff6ee;
    width: 4px;
    height: 4px;

    @media screen and (min-width: 768px) {
      width: 8px;
      height: 8px;
    }

    @media screen and (min-width: 1366px) {
      width: 14px;
      height: 14px;
    }

    &-active {
      background-color: #f48800;
    }
  }
}
</style>