<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-01-12 15:35:09
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2024-01-17 11:31:24
 * @FilePath: \general-work-web\General-AI-Platform-Web-Client\src\views\workbench\components\SwiperShow.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { ref } from "vue";
// import Swiper core and required modules
import {
  //   Loop,
  Autoplay,
  Navigation,
  Pagination,
  Scrollbar,
  A11y
} from "swiper/modules";
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";
// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";

// Import Swiper styles

const onSwiper = swiper => {
  console.log(swiper);
};
const onSlideChange = () => {
  console.log("slide change");
};

const swiperList = ref([
  {
    url: "https://cdn.lifeofpix.com/368492/_w1800/368506/lifeofpix-368492368506.webp"
  },
  {
    url: "https://cdn.lifeofpix.com/359864/_AUTOxAUTO_crop_center-center_none/361816/lifeofpix-michaelmercer-361816.webp"
  },
  {
    url: "https://cdn.lifeofpix.com/368492/_AUTOxAUTO_crop_center-center_none/368497/lifeofpix-368492368497.webp"
  }
]);

const modules = [Navigation, Pagination, Scrollbar, A11y, Autoplay];
</script>

<template>
  <swiper
    class="home_swiper_wrap"
    :modules="modules"
    :loop="true"
    :autoplay="{ delay: 2500, disableOnInteraction: false }"
    :slides-per-view="1"
    :space-between="50"
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide v-for="(v, k) in swiperList" :key="k + ''">
      <img :src="v.url" alt="" />
    </swiper-slide>
  </swiper>
</template>

<style lang="scss">
.home_swiper_wrap {
  .swiper-scrollbar {
    display: none;
  }

  .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background-color: rgb(255 255 255 / 60%);
  }

  .swiper-pagination-bullet-active {
    width: 19px;
    background-color: white;
    border-radius: 3px;
  }
}
</style>
