고영 홈페이지 테스트


super-embed:

<!-- 슬라이더 컨테이너 -->
<div id="ky-slider-root" class="slider-container">
  <div class="slider-wrapper">
    
    <!-- [슬라이드 1] -->
    <div class="ky-slide fade">
      <img src="https://d19m5rauv1cd5h.cloudfront.net/wp-content/uploads/2022/09/14002154/map-worldwide.png" alt="Koh Young Worldwide">
      <div class="slide-content">
        <h2>Koh Young Worldwide</h2>
        <p>Global Leader in 3D Measurement & Inspection</p>
        <a href="https://kohyoung.com" target="_blank" class="slide-btn">자세히 보기</a>
      </div>
    </div>

    <!-- [슬라이드 2] -->
    <div class="ky-slide fade">
      <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=1600&q=80" alt="Semicon Japan">
      <div class="slide-content">
        <h2>SEMICON JAPAN</h2>
        <p>첨단 검사 기술의 미래를 고영에서 확인하세요</p>
        <a href="#" class="slide-btn">전시회 정보 ▸</a>
      </div>
    </div>

    <!-- [슬라이드 3] -->
    <div class="ky-slide fade">
      <img src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=1600&q=80" alt="Smart Factory">
      <div class="slide-content">
        <h2>Smart Factory Solution</h2>
        <p>진정한 스마트 팩토리의 실현, 고영이 함께합니다</p>
        <a href="#" class="slide-btn">솔루션 보기 ▸</a>
      </div>
    </div>

    <!-- 화살표 버튼 (직접 전역 함수 호출) -->
    <a class="prev" onclick="window.moveKySlide(-1)">❮</a>
    <a class="next" onclick="window.moveKySlide(1)">❯</a>
    
    <!-- 하단 점 -->
    <div class="dots-container">
      <span class="dot" onclick="window.setKySlide(1)"></span>
      <span class="dot" onclick="window.setKySlide(2)"></span>
      <span class="dot" onclick="window.setKySlide(3)"></span>
    </div>

  </div>
</div>

<style>
  /* [스타일] 기존과 동일하지만 안전장치 유지 */
  .ky-slide { display: none; }
  .ky-slide:first-child { display: block; } /* 첫장은 무조건 보임 */

  .slider-container { 
    position: relative; 
    width: 100%; 
    height: 600px !important; 
    margin: 0 auto; 
    overflow: hidden; 
    background-color: #222; 
  }
  
  .ky-slide img { 
    width: 100%; 
    height: 600px !important; 
    object-fit: cover; 
    filter: brightness(0.6); 
    display: block;
  } 
  
  .slide-content { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
    text-align: center; color: white; width: 80%; z-index: 10; 
  }
  .slide-content h2 { font-size: 48px; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); }
  .slide-content p { font-size: 20px; margin-bottom: 30px; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); }
  
  .slide-btn { padding: 12px 30px; background-color: #6fbb68; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; transition: 0.3s; }
  .slide-btn:hover { background-color: #5aa654; }

  .prev, .next { cursor: pointer; position: absolute; top: 50%; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 30px; z-index: 20; background-color: rgba(0,0,0,0.3); user-select: none; }
  .next { right: 0; border-radius: 3px 0 0 3px; }
  .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }

  .dots-container { text-align: center; position: absolute; bottom: 20px; width: 100%; z-index: 20; }
  .dot { cursor: pointer; height: 12px; width: 12px; margin: 0 4px; background-color: #bbb; border-radius: 50%; display: inline-block; }
  .active, .dot:hover { background-color: #717171; }
  
  .fade { animation-name: fade; animation-duration: 1.5s; }
  @keyframes fade { from {opacity: .4} to {opacity: 1} }

  @media only screen and (max-width: 768px) {
    .slider-container, .ky-slide img { height: 400px !important; }
    .slide-content h2 { font-size: 28px; }
  }
</style>

<script>
  // [핵심 수정] 변수와 함수를 'window'에 붙여서 어디서든 접근 가능하게 만듦
  window.kySlideIndex = 1;

  // 슬라이드 이동 함수 (전역)
  window.moveKySlide = function(n) {
    window.showKySlides(window.kySlideIndex += n);
  };

  // 특정 슬라이드로 이동 (전역)
  window.setKySlide = function(n) {
    window.showKySlides(window.kySlideIndex = n);
  };

  // 슬라이드 보여주는 로직 (전역)
  window.showKySlides = function(n) {
    let i;
    // 매번 요소를 새로 찾음 (안전장치)
    let slides = document.getElementsByClassName("ky-slide");
    let dots = document.getElementsByClassName("dot");

    if (!slides || slides.length === 0) return;

    if (n > slides.length) { window.kySlideIndex = 1; }    
    if (n < 1) { window.kySlideIndex = slides.length; }

    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }

    slides[window.kySlideIndex-1].style.display = "block";  
    if(dots.length > 0) {
      dots[window.kySlideIndex-1].className += " active";
    }
  };

  // 자동 슬라이드 시작
  window.startKyAutoSlide = function() {
    setInterval(function() {
      window.moveKySlide(1);
    }, 5000);
  };

  // 초기 실행 (0.5초 뒤 실행해서 로딩 문제 방지)
  setTimeout(function() {
    window.showKySlides(window.kySlideIndex);
    window.startKyAutoSlide();
  }, 500);

</script>

갤러리 보기