hhh_new/template/top_carousel.html

<section class="w-100 position-relative top-carousel">
  <button class="text-center d-none d-lg-block close-btn">
    <i class="fas fa-chevron-up" style="transform: translateY(-2px)"></i>
    <p>隱藏</p>
  </button>
  <div class="container-fluid mx-auto" style="max-width: 1300px">
    <div class="slider-content"></div>
    <!-- 輪播進度條 -->
    <div class="bullet-list"></div>
  </div>
</section>

<script>
  $.ajax({
    method: "get",
    url: "../../json/data_index.json",
    // url: "https://m3.hhh.com.tw:18689/genjson_new?filename=realtime.json",
    dataType: "json",
  }).done((data) => {
    result = [...data];
    renderTopCarousel(result);
    console.log('result', result);
  }).fail((error) => {
    console.log('genjson_new error', error);
  });

  // 渲染頂部輪播
  function renderTopCarousel(data) {
    let temp = data[0]["data"];
    console.log('temp', temp);
    renderBullet(temp);
    renderBannerStr("slider-content", temp);
    let randomInt = getRandomInt(7);

    let adTopup_count = []
    // 新刊頭 Banner ga4 (一開始進來先送，剩下輪播送)
    setTimeout(() => {
      let list_Topup_Banner = document.querySelectorAll('.slider-content .slide-item');
      let ad_first;
      try {
        ad_first = list_Topup_Banner[randomInt].getAttribute('data_id');
      } catch (e) {
        ad_first = '加載問題，請無視';
        console.log(ad_first);
      }

      dataLayer.push({
        'event': 'Banner_Impression',
        'ad_name': ad_first,
        'ad_location': '新刊頭Banner'
      });
      adTopup_count.push(ad_first)
    }, 1000);


    $(".slider-content").slick({
      dots: false,
      infinite: true,
      speed: 500,
      autoplay: true,
      autoplaySpeed: 3000,
      slidesToScroll: 1,
      arrows: true,
      initialSlide: randomInt, // 起始順序
      prevArrow:
        '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
      nextArrow:
        '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
    });
    $(".bullet").removeClass("bullet-active");
    $(".bullet")
      .eq($(".slick-active").data("slick-index"))
      .addClass("bullet-active");

    $(".slider-content").on("afterChange", function (event, slick, currentSlide) {
      // // 新刊頭廣告 ga4
      // let list = document.querySelectorAll('.slider-content .slide-item');
      // let ad1 = list[currentSlide + 1].getAttribute('data_id')
      // // 送 dataLayer (要看得到廣告才送，電腦手機版不一樣)
      // if ($('.slider-content .slide-item').offset().top - $(window).scrollTop() > -175) {
      //   if (!adTopup_count.includes(ad1)) {
      //     dataLayer.push({
      //       'event': 'Banner_Impression',
      //       'ad_name': ad1,
      //       'ad_location': '新刊頭Banner'
      //     });
      //     adTopup_count.push(ad1);
      //   }
      // }
      // 輪播
      $(".bullet").removeClass("bullet-active");
      $(`.bullet.item-${currentSlide}`).addClass("bullet-active");
    });
  }

  function renderBannerStr(sec, data) {
    let adNamesTop = [];
    let str = "";
    for (let i = 0; i < data.length; i++) {
      let adNameTop = `${data[i]["id"]}${data[i]["alt"]}`;
      adNamesTop.push(adNameTop);

      if (data[i]["Dwebp"]) {
        str += `
      <a href="${data[i]["link"]}" data-ga4="${data[i]["id"]}${data[i]["alt"]}">
        <img class="${sec}-${i + 1} slide-item img-fluid" src="${data[i]["Dwebp"]}" data-bg="${data[i]["Dwebp"]}" alt="${data[i]["alt"]}"  data_id="${data[i]["id"]}${data[i]["alt"]}">
      </a>`;
      } else {
        str += `
      <a href="${data[i]["link"]}" data-ga4="${data[i]["id"]}${data[i]["alt"]}">
        <img class="${sec}-${i + 1} slide-item img-fluid" src="${data[i]["DimgUrl"]}" data-bg="${data[i]["DimgUrl"]}" alt="${data[i]["alt"]}" data_id="${data[i]["id"]}${data[i]["alt"]}">
      </a>`;
      }
    }
    $(`.${sec}`).html(str);
    // ga4-banners
    adNamesTop.forEach((adNameTop) => {
      document.querySelectorAll(`a[data-ga4="${adNameTop}"]`).forEach((element) => {
        element.addEventListener('click', function () {
          dataLayer.push({
            'event': 'Banner_Click',
            'ad_name': adNameTop,
            'ad_location': '新刊頭'
          });
        });
      });
    });
  }

  function renderBullet(data) {
    let str = "";
    for (let i = 0; i < data.length; i++) {
      str += `<div class="bullet item-${i}"></div>`;
    }
    $(".bullet-list").html(str);
  }

  // 範圍內取隨機整數 (0-8)
  function getRandomInt(max) {
    return Math.floor(Math.random() * max);
  }

  $(".top-carousel .close-btn").click(function () {
    $(this).css("display", "none");
    $(".top-carousel").addClass("banner-close");
    sticky = 0;
  });
</script>