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

<template>
  <div class="container">
    <div class="big_weapon">
      <swiper
        @swiper="setWeaponSwiper"
        :slides-per-view="1"
        :thumbs="{ swiper: weaponThumbsSwiper }"
        :modules="modules"
        :followFinger="false"
         class="weapon-big"
        :navigation="{
          nextEl: '.swiper-button-next-btn',
          prevEl: '.swiper-button-prev-btn',
        }"
     
      >
        <SwiperSlide v-for="(slideContent, index) in weaponListBig" :key="index">
          <Weapon3dLoader :filePath="slideContent.url"></Weapon3dLoader>
        </SwiperSlide>
      </swiper>
    </div>
    <div class="thumbs_weapon_container">
      <Swiper
        @swiper="setWeaponThumbsSwiper"
        :slides-per-view="4"
        :modules="modules"
        :space-between="23"
        class="weaponThumbs"
        :slideToClickedSlide="true"
        :centeredSlidesBounds="true"
        :multipleActiveThumbs="false"
      >
        <SwiperSlide v-for="(slideContent, index) in weaponList" :key="index">
          <div class="weapon_thumb">
            <img class="weapon_thumb_img" :src="slideContent.img" />
            <div  v-if="test(index, slideContent)" class="weapon-bg">
            <img
              v-if="test(index, slideContent)"
              class="weapon_thumb_bg  weapon_thumb_bg-active"
              :src="slideContent.img"
            />
          </div>
          </div>
        </SwiperSlide>
      </Swiper>
       <div class="swiper-button-prev-btn">
        <img src="@/assets/img/home/game-swiper-card/next.png" alt="" />
      </div>
      <div class="swiper-button-next-btn" >
        <img src="@/assets/img/home/game-swiper-card/prev.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { Thumbs, FreeMode, Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import Weapon3dLoader from "./Weapon3DLoader.vue";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import "swiper/css/free-mode";

const weaponList = reactive([
  { id: 1, img: require("@/assets/img/home/weapon/70001.png") },
  { id: 2, img: require("@/assets/img/home/weapon/70002.png") },
  { id: 3, img: require("@/assets/img/home/weapon/70003.png") },
  { id: 4, img: require("@/assets/img/home/weapon/70004.png") },
  { id: 5, img: require("@/assets/img/home/weapon/70005.png") },
  { id: 6, img: require("@/assets/img/home/weapon/70006.png") },
  { id: 7, img: require("@/assets/img/home/weapon/70007.png") },
]);
const weaponListBig = reactive([
  { id: 1, url: '/70001.gltf' },
  { id: 2, url: '/70002.gltf' },
  { id: 3, url: '/70003.gltf' },
  { id: 4, url: '/70004.gltf' },
  { id: 5, url: '/70005.gltf' },
  { id: 6, url: '/70006.gltf' },
  { id: 7, url: '/70007.gltf' },
]);
const modules = [FreeMode, Navigation, Thumbs];
const weaponSwiper = ref(null);
const weaponThumbsSwiper = ref(null);
const activeIndex = ref(0);

const setWeaponThumbsSwiper = (swiper) => {
  weaponThumbsSwiper.value = swiper;
  console.log("setWeaponThumbsSwiper ", swiper);
  // swiper.on('slideChange', function() {
  //   console.log('slide changed', swiper);
  //   activeIndex.value = swiper.activeIndex;
  // })
};

const setWeaponSwiper = (swiper) => {
  weaponSwiper.value = swiper;
  console.log('slide changed', swiper);
  swiper.on('slideChange', function() {
    console.log('slide changed weapon', swiper);
    activeIndex.value = weaponSwiper.value.activeIndex;
  })
};

// const onSlideChange = () => {
//   activeIndex.value = weaponSwiper.value.activeIndex;
// };

function test(index, sc) {
  console.log(index, "oo");
  return activeIndex.value == index;
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  
}
.big_weapon {
  width: 1136px;
  margin-left: 156px;
  height: 400px;
  margin: 0 auto;
  // position: absolute;
  // left: 156px;
  // bottom: -460px;
}
// .weapon_big_image {
//   width:400px;
//   height:400px;
// }
.thumbs_weapon_container {
  user-select: none;
  position: relative;
  padding: 0 40px;
  width: 1440px;
  height: 200px;
  .swiper-button-prev::after {
    display: none;
  }
  .swiper-button-next::after {
    display: none;
  }
  .swiper-button-prev-btn {
    position: absolute;
    left:150px;
    top: -180px;
    z-index: 5;
  }
  .swiper-button-next-btn {
    position: absolute;
    right: 150px;
    z-index: 5;
    top:-180px;
  }

  .swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}
}
.weapon_thumb {
  width: 170px;
  height: 184px;
}
.weapon_thumb_img {
  display: block;
  position: absolute;
  left: 100px;
  top: 100px;
  width: 170px;
  height: 84px;
  opacity: 0.6;
  background: rgba(131, 188, 217, 0.3);
  transform: translate(-50%, -50%);
}
.weapon_thumb_bg {
  display: block;
  position: absolute;
  left: 100px;
  top: 100px;
  width: 170px;
  height: 84px;
  background: rgba(255, 225, 117, 1);
  transform: translate(-50%, -50%);
  clip-path: polygon(
    10px 0,
    calc(100% - 10px) 0,
    100% 0px,
    100% calc(100% - 15px),
    calc(100% - 10px) 100%,
    10px 100%,
    0 calc(100% - 0px),
    0 10px
  );
}
 .weapon-bg{
  position: relative;
 }
 .weapon-bg::before{
  position: absolute;
  content: '';
  bottom: -163px;
  left: 15px;
  display: block;
  width: 170px;
  height:17px;
  background: url('./@/assets/img/home/weapon-bottom-boder.png')no-repeat;
  background-size: contain;
 }

.HeroThumbs {
  
}
</style>