hjyd/src/views/Index/components/HeaderSwiper/index.vue

<template>
  <div class="header_container">
    <swiper
      :pagination="pagination"
      :modules="modules"
      :virtual="true"
      :spaceBetween="0"
      :loop="true"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      :keyboard="{
        enabled: true,
        onlyInViewport: false,
        pageUpDown: true,
      }"
      @autoplayTimeLeft="onAutoplayTimeLeft"
      class="header_swiper"
    >
      <swiper-slide :virtualIndex="1">
        <SlideFive />
      </swiper-slide>
      <swiper-slide :virtualIndex="2">
        <SlideTwo />
      </swiper-slide>
      <swiper-slide :virtualIndex="3">
        <SlideOne />
      </swiper-slide>
      <swiper-slide :virtualIndex="4">
        <SlideFour />
      </swiper-slide>
      <swiper-slide :virtualIndex="5">
        <SlideThree />
      </swiper-slide>
      <template #container-end>
        <div class="autoplay-progress">
          <svg viewBox="0 0 48 48" ref="progressLine">
            <line x1="-200" y1="2" x2="300" y2="2"></line>
          </svg>
        </div>
      </template>
    </swiper>
    <div class="down_circle" @click="toNext">
      <img
        :src="Arrow"
        alt="arrow"
        class="arrow animate__animated animate__heartBeat animate__infinite animate__slower"
      />
    </div>
  </div>
</template>
<script>
// :autoplay="{
//       delay: 5000,
//       disableOnInteraction: false,
//     }"
import { useSwiperStore } from '@/store'
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'
// Import Swiper styles
import 'swiper/css'
// import required modules
import { Pagination, Autoplay, Keyboard, Virtual } from 'swiper'
import { ref } from 'vue'
import SlideOne from './SlideOne'
import SlideTwo from './SlideTwo'
import SlideThree from './SlideThree'
import SlideFour from './SlideFour'
import SlideFive from './SlideFive'
import Arrow from '@/assets/img/banner/arrow.png'
export default {
  components: {
    Swiper,
    SwiperSlide,
    SlideOne,
    SlideTwo,
    SlideThree,
    SlideFour,
    SlideFive,
  },
  methods: {
    toNext() {
      const swiperStore = useSwiperStore()
      swiperStore.slideTo(1)
    },
    onSwiper(swiper) {},
    onSlideChange(swiper) {
      const swiperStore = useSwiperStore()
      const { activeIndex } = swiper
      swiperStore.updateHeaderIndex(activeIndex)
    },
  },
  setup() {
    const progressLine = ref(null)
    const onAutoplayTimeLeft = (s, time, progress) => {
      progressLine.value.style.setProperty('--progress', 1 - progress)
    }
    return {
      onAutoplayTimeLeft,
      progressLine,
      Arrow,
      pagination: {
        clickable: true,
        renderBullet: function (index, className) {
          return '<div class="' + className + '"></div>'
        },
      },
      modules: [Pagination, Autoplay, Keyboard, Virtual],
    }
  },
}
</script>

<style scoped lang="scss">
.header_container {
  width: 100%;
  height: 100%;
  position: relative;
  min-width: 1668px;
  background: #000;
  .down_circle {
    position: absolute;
    bottom: 67px;
    left: 50%;
    transform: translate(-50%);
    width: 28px;
    height: 28px;
    border: 2px solid #ffffff;
    z-index: 11;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    .arrow {
      width: 12px;
      height: 8px;
    }
  }
}
</style>