AI_Video_LP/layouts/partials/components/carousel.html

<div class="my-4 carousel-wrapper">
  <div class="swiper carousel">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a target="_blank" href="/main-news/警察廣播電台初次ai主播真人建模-與choozmo合作ai影片/">
          <div class="wrapper">
            <img src="/imgs/home/banner-01.jpg"
              alt="choozmo｜AI主播｜AI｜警察廣播電臺｜警廣｜警廣路況｜警廣線上收聽｜人工智慧｜AI人工智慧｜人工智能｜AI雙主播｜雙主播｜虛擬主播｜虛擬人｜新聞播報">
            <div class="video-wrapper">
              <iframe id="yt_frame" src="https://www.youtube.com/embed/HgrjL8pTpUY?autoplay=1&mute=1"
                title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
            </div>
          </div>
        </a>
        <div class="frame-item">
          <select onchange="setFrame(this)">
            <option value="">切換語言</option>
            <option value="國語">國語</option>
            <option value="臺語">臺語</option>
            <option value="英文">英文</option>
            <option value="日文">日文</option>
            <option value="泰文">泰文</option>
            <option value="印尼文">印尼文</option>
            <option value="越南文">越南文</option>
            <option value="馬來文">馬來文</option>
            <option value="原住民語">原住民語(阿美族)</option>
            <option value="客語">客語</option>
            <option value="手語">手語</option>
          </select>
        </div>
      </div>
      <div class="swiper-slide">
        <a href="/main-news/virtual-production-studio-turnkey-solution/">
          <img src="/imgs/home/banner-02.jpg"
            alt="Turnkey Solution｜Virtual Production Studio｜AI Spokesperson｜choozmo｜AI主播｜AI｜AI建模｜虛擬主播｜人工智慧｜客製化主播｜最新服務｜英文AI主播｜AI 虛擬主播｜生成式 AI技術｜Facelandmark｜deeplearning">
          <!-- <img src="/imgs/home/banner01_mb.webp" alt="Choozmo in 2023CES" class="d-block d-md-none p-4"> -->
        </a>
      </div>
    </div>
  </div>
  <div class="swiper-button-next d-none d-md-block"></div>
  <div class="swiper-button-prev d-none d-md-block"></div>
  <div class="swiper-pagination"></div>
</div>

<script>
  function setFrame(select) {
    let val = select.value;
    if (val === "國語") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/HgrjL8pTpUY?autoplay=1&mute=1');
    } else if (val === "臺語") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/iub7XwIIKsU?autoplay=1&mute=1');
    } else if (val === "英文") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/J0rMl5Aje8E?autoplay=1&mute=1');
    } else if (val === "日文") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/STBlnumMtJI?autoplay=1&mute=1');
    } else if (val === "泰文") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/IQSNsUpzH4M?autoplay=1&mute=1');
    } else if (val === "印尼文") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/moxFwtySJM8?autoplay=1&mute=1');
    } else if (val === "越南文") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/QfmlSYbvNsg?autoplay=1&mute=1');
    } else if (val === "馬來文") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/7jTyzenud8o?autoplay=1&mute=1');
    } else if (val === "原住民語") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/oGEX1P9AF9Y?autoplay=1&mute=1');
    } else if (val === "客語") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/OlyafG6Oxtk?autoplay=1&mute=1');
    } else if (val === "手語") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/ycUAa3iKjhA?autoplay=1&mute=1');
    }
  }
</script>