<!--
  Description: 课程广场走马灯组件
  Author: BaiQi
  Created Date: 2024-6-30
-->
<template>
  <div class="carousel-banner">
    <el-carousel :interval="4000" type="card" >
      <el-carousel-item class="carousel-items" v-for="item in pictureItems" :key="item.id">
        <img class="carousel-image" :src="item.src" :alt="item.alt"/>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script lang="ts" setup>
  import {reactive} from "vue";
  import './index.scss'

  const pictureItems = reactive([
    {
      id: 1,
      src:"https://ts1.cn.mm.bing.net/th/id/R-C.0aa9ed99186139c4e63a27925fb1c8c3?rik=6s%2bivLti461gug&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140607%2f1-14060G63057.jpg&ehk=UC319wlPmShs08sfR11%2bnuGdT25fCAyOaLgasO9TEWE%3d&risl=&pid=ImgRaw&r=0",
      alt:""
    },
    {
      id: 2,
      src:"https://ts1.cn.mm.bing.net/th/id/R-C.ba878cda40c552712ff91b7441c15c6f?rik=KjUig1Gbxp%2f04w&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140607%2f1-14060G63046.jpg&ehk=%2fJ7uX4m3ffl26ltsA%2b7n%2bAcZKlyPBI9s%2bKQNa%2bgp1p8%3d&risl=&pid=ImgRaw&r=0",
      alt:""
    },
    {
      id: 3,
      src:"https://ts1.cn.mm.bing.net/th/id/R-C.15e5174fc0f174df652977a29cb8c971?rik=LW%2b0WEV0Nn9fig&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140607%2f1-14060G63059.jpg&ehk=5d9bDO4Y6a9g36PQ6usFLLr7IGtBlRJIWnmAXSJ0FLo%3d&risl=&pid=ImgRaw&r=0",
      alt:""
    },
    {
      id: 4,
      src: "https://ts1.cn.mm.bing.net/th/id/R-C.344979857cde4bb5240a133c4c19cf64?rik=vwb78fOeQFChYg&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140607%2f1-14060G63050.jpg&ehk=LdMiMyS4pebCqp%2b547SJxao%2byoVw%2fdZoIooa3kYGWgE%3d&risl=&pid=ImgRaw&r=0",
      alt:""
    },
    // {
    //   id: 7,
    //   src:"https://nos.netease.com/edu-image/c76ad7fd5c3644899844c1edc0c11193.jpg",
    //   alt:""
    // },
  ])
</script>

<script lang="ts">
export default {
  name: "Banner"
}
</script>
