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

<template>
  <div class="weapon">
    <div class="weapon-bg">
      <img src="../../assets/img/mobile-home/weapon-bg.png" alt="" />
    </div>
    <div class="title">WEAPON</div>
    <div class="wenpon-content">
      <swiper
        :modules="modules"
        class="mySwiper"
        :loop="true"
        :autoplay="{ delay: 4000, disableOnInteraction: false }"
        :navigation="{
          nextEl: '.swiper-btn2-next',
          prevEl: '.swiper-btn2-prev',
        }"
      >
        <swiper-slide
          v-for="(weapon, index) in weaponList"
          weaponList
          :key="index"
        >
          <div class="content">
            <div class="weapon-name"><img :src="weapon.name" alt="" /></div>
            <div>
              <XyzTransition
                xyz="down iterate-infinite direction-alternate-reverse ease-in-out duration-15"
              >
                <div v-show="weaponAnimationActive">
                  <img :src="weapon.img" alt="" />
                </div>
              </XyzTransition>
            </div>
          </div>
        </swiper-slide>
        <div class="swiper-btns">
          <div class="swiper-btn2-prev">
            <img src="@/assets/img/mobile-home/next.png" alt="" />
          </div>
          <div class="swiper-btn2-next">
            <img src="@/assets/img/mobile-home/prev.png" alt="" />
          </div>
        </div>
      </swiper>
    </div>
  </div>
</template>
<script setup>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";
import { ref, computed, reactive, onMounted } from "vue";
// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
// import new URLd modules
import { Navigation, Autoplay } from "swiper";
const modules = ref([Navigation, Autoplay]);
const weaponAnimationActive = ref(false);
const weaponList = reactive([
  {
    id: 1,
    img: new URL("@/assets/img/mobile-home/weapon/70001.png", import.meta.url)
      .href,
    name: new URL(
      "@/assets/img/mobile-home/weapon/Submachine.png",
      import.meta.url
    ).href,
  },
  {
    id: 2,
    img: new URL("@/assets/img/mobile-home/weapon/70002.png", import.meta.url)
      .href,
    name: new URL(
      "@/assets/img/mobile-home/weapon/Shotgun.png",
      import.meta.url
    ).href,
  },
  {
    id: 3,
    img: new URL("@/assets/img/mobile-home/weapon/70003.png", import.meta.url)
      .href,
    name: new URL("@/assets/img/mobile-home/weapon/Sniper.png", import.meta.url)
      .href,
  },
  {
    id: 4,

    img: new URL("@/assets/img/mobile-home/weapon/70004.png", import.meta.url)
      .href,
    name: new URL(
      "@/assets/img/mobile-home/weapon/Bazooka.png",
      import.meta.url
    ).href,
  },
  {
    id: 5,
    img: new URL("@/assets/img/mobile-home/weapon/70005.png", import.meta.url)
      .href,
    name: new URL("@/assets/img/mobile-home/weapon/Laser.png", import.meta.url)
      .href,
  },
  {
    id: 6,
    img: new URL("@/assets/img/mobile-home/weapon/70006.png", import.meta.url)
      .href,
    name: new URL("@/assets/img/mobile-home/weapon/Freeze.png", import.meta.url)
      .href,
  },
  {
    id: 7,
    img: new URL("@/assets/img/mobile-home/weapon/70007.png", import.meta.url)
      .href,
    name: new URL("@/assets/img/mobile-home/weapon/Flame.png", import.meta.url)
      .href,
  },
]);

onMounted(() => {
  weaponAnimationActive.value = true;
});
</script>
<style lang="scss" scoped>
.weapon {
  // background: #90e2e9;
  padding-top: 43px;
  // padding-bottom: 129px;
  position: relative;
  .weapon-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    img {
      max-width: 100%;
      height: auto;
      object-fit: cover;
    }
  }
  .wenpon-content {
    background: #90e2e9;
    .weapon-name {
      width: 584px;
      margin-left: 72px;
    }
  }
}
.title {
  font-size: 42px;
  text-align: center;
  font-family: "Big John";
  position: relative;
  z-index: 2;
  font-weight: 400;
  color: #000101;
  background: url("@/assets/img/mobile-home/weapon/weapon-title-boder.png")
    no-repeat;
  background-size: contain;
  background-position: center center;
  margin-bottom: 79px;
}
// .swiper {
//   width: 100%;
//   height: 100%;
// }

.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;
}
.swiper-btns {
  position: relative;
  margin: 0 auto;
  display: block;
  width: 182px;
  height: 294px;
}
.swiper-btn2-prev {
  top: 95px;
  width: 70px;
  height: 70px;
  position: absolute;
  cursor: pointer;
}
.swiper-btn2-next {
  width: 70px;
  height: 70px;
  top: 95px;
  position: absolute;
  right: 0;
  cursor: pointer;
}
</style>