ShowEasyFrontEnd/FrontEnd/components/swiper/centerMode.vue

<template>
  <section :class="['tw-relative tw-mt-[48px] xl:tw-max-w-[1246px] xl:tw-mx-auto']">
    <div class="swiper-container centerMode xl:tw-max-w-[1106px] xl:tw-mx-auto xl:tw-px-[22px]" ref="centerMode"
      @mouseenter="enter" @mouseleave="leave">
      <div :class="['swiper-wrapper']">
        <div v-for="(item, index) in list" :key="index" :class="['swiper-slide']">
          <div class="tw-rounded-[24px]">
            <lazyImg :src="item.image" :customClass="'swiper-lazy tw-rounded-[24px]'"></lazyImg>
          </div>
        </div>
      </div>
    </div>
    <div :class="[
      'swiper-button-prev ad tw-text-black tw-hidden',
      centerModeSwiper ? 'xl:tw-block' : '',
    ]"></div>
    <div :class="[
      'swiper-button-next ad tw-text-black tw-hidden',
      centerModeSwiper ? 'xl:tw-block' : '',
    ]"></div>
  </section>
</template>
<script>
import Swiper from "swiper/bundle";
import lazyImg from "@/components/img/img.vue";
export default {
  components: {
    Swiper,
    lazyImg,
  },
  props: {
    list: {
      type: Array,
    },
  },
  data() {
    return {
      centerModeSwiper: null,
    };
  },
  mounted() {
    let vm = this;
    vm.$nextTick(function () {
      vm.centerModeSwiper = new Swiper(".swiper-container.centerMode", {
        direction: "horizontal",
        initialSlide: 0,
        slidesPerView: 1.6,
        centeredSlides: true,
        loop: false,
        loopedSlides: 0,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        spaceBetween: 32,
        // autoplay: {
        //   disableOnInteraction: true,
        //   delay: 5000,
        // },
        preloadImages: false,
        lazy: {
          loadPrevNext: true,
          loadOnTransitionStart: true,
          loadPrevNextAmount: 6,
        },
        watchSlidesProgress: true,
        navigation: {
          nextEl: ".swiper-button-next.ad",
          prevEl: ".swiper-button-prev.ad",
        },
        breakpoints: {
          414: {
            slidesPerView: 1.74,
            spaceBetween: 32,
          },
          768: {
            slidesPerView: 1.74,
            spaceBetween: 48,
          },
          1366: {
            slidesPerView: 3,
            spaceBetween: 24,
            centeredSlides: false,
            grabCursor: true,
          },
        },
      });
      vm.centerModeSwiper.init();
      vm.centerModeSwiper.update();
    });
  },
  methods: {
    enter() {
      this.centerModeSwiper.autoplay.stop();
    },
    leave() {
      this.centerModeSwiper.autoplay.start();
    },
  },
};
</script>
<style lang="scss" scoped>
.swiper-container {
  width: 100% !important;
}

.swiper-slide {
  margin-right: 20px;
}

.swiper-button {
  &-prev.ad {
    z-index: 4;

    &:focus-visible,
    &:focus {
      outline: none;
    }

    &::after {
      text-align: center;
      color: transparent;
      background-image: url('~/assets/svg/u-angle-left-b.svg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  }

  &-next.ad {
    z-index: 4;

    &:focus-visible,
    &:focus {
      outline: none;
    }

    &::after {
      text-align: center;
      color: transparent;
      background-image: url('~/assets/svg/u-angle-right-b.svg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  }
}

.active {
  position: relative;

  &::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -12px;
    width: 100%;
    height: 2px;
    background-color: #f48800;
  }
}
</style>