cebg-website-mobile/mobile/src/components/home/HeroSweiper.vue

<template>
  <div class="hero">
    <div class="hero-bg"><img src="@/assets/img/mobile-home/hero-bg.png" alt="" /></div>
    <div class="title">hero</div>
    <div class="hero-content">
      <swiper
        :modules="modules"
        class="mySwiper"
        :autoplay="{ delay: 4000, disableOnInteraction: false }"
        @swiper="setHeroSwiper"
        :navigation="{
          nextEl: '.swiper-btn1-next',
          prevEl: '.swiper-btn1-prev',
        }"
      >
        <swiper-slide v-for="(hero, index) in HeroList" :key="index">
          <div class="content" :class="index >= 7 ? 'man-bg' : 'woman-bg'">
            <div class="img">
              <img v-if="test(index, hero)" :src="hero.img" alt="" />
            </div>
          </div>
        </swiper-slide>
      </swiper>
      <div class="swiper-btns">
        <div class="swiper-btn1-prev">
          <img src="@/assets/img/home/next.png" alt="" />
        </div>
        <div class="swiper-btn1-next">
          <img src="@/assets/img/home/prev.png" alt="" />
        </div>
      </div>
      <div v-for="(hero, index) in HeroList">
        <div class="hero-introduce" v-if="activeIndex == index">
          <div class="introduce-item">{{ hero.slogan }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { ref, onMounted } from "vue";
import { HeroList } from "@/configs/information";
import "swiper/css";
import "swiper/css/navigation";
import { Navigation, Autoplay} from "swiper";
const modules = ref([Navigation,Autoplay]);
const heroAnimationActive = ref(false);
const swiperIndex = ref(null);
const activeIndex = ref(0);
const setHeroSwiper = (swiper) => {
  swiperIndex.value = swiper;
  console.log("slide changed", swiper);
  swiper.on("slideChange", () => {
    console.log("slide changed weapon", swiper);
    activeIndex.value = swiperIndex.value.activeIndex;
  });
};

function test(index, sc) {
  console.log(index, "oo");

  return activeIndex.value == index;
}
onMounted(() => {
  heroAnimationActive.value = true;
});
</script>
<style lang="scss" scoped>
.hero {
  background: linear-gradient(180deg, #34adb4, #41b8bf, #73d4db);
  padding-bottom: 114px;
  position: relative;
  .hero-bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .hero-content {
    // // height: 918px;
    // background: #90e2e9;
  }
  .title {
    font-size: 42px;
    text-align: center;
    font-family: "Big John";
    font-weight: 400;
    color: #000101;
    background: url("@/assets/img/mobile-home/hero/hero-title-boder.png")
      no-repeat;
    background-size: contain;
    background-position: center center;
  }
}
.mySwiper {
  position: relative;
  height: 918px;
  .content {
    height: 918px;
    bottom: 0;
    position: absolute;
    .img {
      position: relative;
      height: 100%;
      bottom: 100px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .woman-bg {
    height: 918px;
    bottom: 0;
    position: absolute;
    background: url("@/assets/img/mobile-home/hero/hero-bg.png") no-repeat;
    background-size: contain;
    background-position: center bottom;
    .img {
      position: relative;
      bottom: 0;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .man-bg {
    height: 918px;
    bottom: 0;
    position: absolute;
    background: url("@/assets/img/mobile-home/hero/hero-bg-active.png")
      no-repeat;
    background-size: contain;
    background-position: center bottom;
    .img {
      position: relative;
      bottom: 0;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .hero-introduce {
    position: absolute;
    bottom: -650px;
    left: 39px;
    margin: 0 auto;
    width: 670px;
    height: 340px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 26px;
    display: flex;
    align-items: center;
    font-family: Arial;
    font-weight: bold;
    color: #ffffff;
    background: url("../../assets/img/mobile-home/hero/hero-introduce-bg.png")
      no-repeat;
    background-size: contain;
  }
}
.woman-bg {
  background: url("@/assets/img/mobile-home/hero/hero-bg.png") no-repeat;
  background-size: 780px 780px;
  background-position: center bottom;
}
.man-bg {
  background: url("@/assets/img/mobile-home/hero/hero-bg-active.png") no-repeat;
  background-size: 780px 780px;
  background-position: center bottom;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-introduce {
  margin: 0 auto;
  width: 670px;
  margin-top: 100px;
  height: 340px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 26px;
  display: flex;
  align-items: center;
  font-family: Arial;
  font-weight: bold;
  color: #ffffff;
  background: url("../../assets/img/mobile-home/hero/hero-introduce-bg.png")
    no-repeat;
  background-size: contain;
  .introduce-item {
    width: 89%;
    margin: 0 auto;
  }
}
.swiper-btns {
  position: relative;
  width: 182px;
  height: 190px;
  margin: 0 auto;
  .swiper-btn1-prev {
    top: 40px;
    width: 70px;
    height: 70px;
    position: absolute;
    cursor: pointer;
  }
  .swiper-btn1-next {
    top: 40px;
    width: 70px;
    height: 70px;
    position: absolute;
    right: 0;
    cursor: pointer;
  }
}
</style>