violet-beauty/js/index.js

$(".gototop").hide();
$(window).scroll(function () {
  var y = window.scrollY;

  if (y > 10) {
    $(".gototop").show();
  } else {
    $(".gototop").hide();
  }

});

$("*").each(function (index, element) {
  // 此元素被點選後執行
  $(this).click(function (e) {
    // 取得被點選元素的屬性：data-gt-target
    var target = $(this).attr("data-gt-target");
    var duration = $(this).attr("data-gt-duration");
    var offset = $(this).attr("data-gt-offset");

    // JS 語法：判斷式
    // if (條件) {程式區塊}
    // 當條件成立，會執行程式區塊

    // 如果 目標有資料 才會執行 { } 內的程式
    // 避免出現 undefine (未定義 - 不存在的資料)
    if (target) {
      //console.log("目標：" + target);
      //console.log("時間：" + duration);
      //console.log("位移：" + offset);

      // 上方位置 = 目標區塊.位移().上方位置
      var top = $(target).offset().top;
      //console.log("要前往元素的上方位置：" + top);

      // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
      // parseInt() 將文字轉為數字

      $("html").stop().animate({
        scrollTop: top - offset
      }, parseInt(duration));
    }
  });
});

// 避免動畫與使用者滾輪衝突
// html 在滾動滾輪時 停止 html 所有效果
$("html").on("mousewheel", function () {
  $("html").stop();
});

$(".playbutton").click(function () {
  var videosrc = $(this).data("info");
  $('.youtube-video').attr('src', `https://www.youtube.com/embed//${videosrc}?autoplay=1`);
});

$(".btn-close").click(function () {
  $('.youtube-video').attr('src', ``);
});

$('#yt-video').on('hidden.bs.modal', function () {
  $('.youtube-video').attr('src', ``);
});



$(".banner-slide").slick({
  dots: true,
  autoplay: true,
  arrows: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplaySpeed: 7000,
  initialSlide: 0,
  infinite: true,
});

$(".violetbeauty_sec01_slide").slick({

  slidesToShow: 4,
  slidesToScroll: 3,
  infinite: true,
  // centerMode: true,
  arrows: true,
  prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>',
  nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>'
});

$(".violetbeauty_sec02_slide").slick({

  slidesToShow: 3,
  slidesToScroll: 3,
  infinite: true,
  // centerMode: true,
  arrows: true,
  prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>',
  nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>'
});

$(".learn_more").click(function () {
  var courseid = $(this).data("info");
  // console.log(courseid);
  $.ajax({
    method: "GET",
    url: "coursecontent.json",
    dataType: "json",
  })

    .done(function (msg) {
      // console.log(msg)
      for (var i = 0; i < msg.length; i++) {
        if (msg[i].Courseid == courseid) {
          var CourseContent = '';
          console.log(msg[i]);
          CourseContent = `
          <div class="course_detail py-3">
              <div class="row">
                  <div class="col-md-7">
                      <div class="course_detail_img mt-3">
                          <img class="img-fluid" src="${msg[i].CourseImg}" alt="">
                      </div>
                  </div>
                  <div class="col-md-5">
                      <div class="course_detail_text">
                          <div class="features_title fw-bold text-start">${msg[i].CourseTitle}</div>


                          <div class="sec_content_right_text">
                              <p>${msg[i].Coursetext}</p>
                          </div>
                      </div>
                      <div class="text-center">
                          <button class="violetbeauty_CTA mt-4"><a style="text-decoration: none;"
                                  target="_blank" href="https://line.me/R/ti/p/%2540qlo9716l"><img
                                      class="cta_flower" src="./img/flower.png" alt="">立即體驗</a></button>
                      </div>
                  </div>
              </div>
      </div>
          `
        }
        $('.modal-body').html(CourseContent);
      }


    });

});