https://taeilsolution.com/assets/js/index_main.js

1/* ============================================================
2   index_main.js — 메인 페이지 전용 스크립트
3   hero slider · portfolio modal · fade-in observer
4   ============================================================ */
5
6$(document).ready(function () {
7
8    /* ---- 히어로 슬라이더 ---- */
9    var currentSlide = 0;
10    var $slides = $('.slide');
11    var $thumbs = $('.hero-thumb');
12
13    function showSlide(index) {
14        $slides.removeClass('active');
15        $slides.eq(index).addClass('active');
16        $thumbs.removeClass('active');
17        $thumbs.eq(index).addClass('active');
18    }
19
20    var autoTimer = setInterval(function () {
21        currentSlide = (currentSlide + 1) % $slides.length;
22        showSlide(currentSlide);
23    }, 5000);
24
25    function goSlide(index) {
26        clearInterval(autoTimer);
27        currentSlide = (index + $slides.length) % $slides.length;
28        showSlide(currentSlide);
29        autoTimer = setInterval(function () {
30            currentSlide = (currentSlide + 1) % $slides.length;
31            showSlide(currentSlide);
32        }, 5000);
33    }
34
35    $thumbs.click(function () {
36        goSlide(parseInt($(this).data('index')));
37    });
38
39    /* 터치 스와이프 */
40    var touchStartX = 0;
41    var sliderEl = document.getElementById('hero-slider');
42    sliderEl.addEventListener('touchstart', function (e) {
43        touchStartX = e.touches[0].clientX;
44    }, { passive: true });
45    sliderEl.addEventListener('touchend', function (e) {
46        var diff = touchStartX - e.changedTouches[0].clientX;
47        if (Math.abs(diff) < 40) return;
48        goSlide(diff > 0 ? currentSlide + 1 : currentSlide - 1);
49    }, { passive: true });
50
51    /* ---- 포트폴리오 클릭 → 모달 ---- */
52    $('.port-item').click(function (e) {
53        e.preventDefault();
54        var imgUrl = $(this).find('.port-img').attr('src');
55        var badge  = $(this).find('.port-badge').text();
56        var title  = $(this).find('h4').text();
57        var desc   = $(this).find('p').text();
58
59        $('#pm-img').css('background-image', 'url(' + imgUrl + ')');
60        $('#pm-badge').text(badge);
61        $('#pm-title').text(title);
62        $('#pm-desc').text(desc + ' 상세 내용이 여기에 표시됩니다. 태일솔루션만의 전문성과 기술력이 담긴 프로젝트입니다.');
63
64        $('#inquiry-modal').hide();
65        $('#port-modal').css('display', 'flex');
66        $('#modal-overlay').addClass('active');
67        $('body').addClass('overflow-hidden');
68    });
69
70    /* ---- 페이드인 Intersection Observer ---- */
71    var observer = new IntersectionObserver(function (entries) {
72        entries.forEach(function (entry) {
73            if (entry.isIntersecting) entry.target.classList.add('visible');
74        });
75    }, { threshold: 0.1 });
76
77    $('.fade-in').each(function () { observer.observe(this); });
78
79});