Enfold 테마의 탭 섹션에 오토 슬라이드 기능을 추가하기

Enfold 테마의 탭 섹션에 오토 슬라이드 기능을 추가하기

Enfold 테마의 탭 섹션에 오토 슬라이드 기능을 추가하려면 JavaScript를 사용해야 합니다. Enfold 테마는 avia.js 파일을 통해 다양한 인터랙션을 관리하며, 탭 자동 전환을 위해 아래와 같은 코드를 추가하면 됩니다.

1. Enfold 테마의 커스텀 JS 파일에 코드 추가

Enfold 테마의 functions.php 파일에 아래 코드를 추가하여, custom.js 파일을 불러올 수 있도록 합니다.

function enqueue_custom_scripts() {
    wp_enqueue_script('custom-tabs-auto-slide', get_stylesheet_directory_uri() . '/js/custom-tabs-auto-slide.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

2. custom-tabs-auto-slide.js 파일 생성 후 아래 코드 추가

아래 코드를 사용하여 탭이 일정 간격마다 자동으로 변경되도록 설정합니다.

jQuery(document).ready(function ($) {
    var tabInterval = 5000; // 5초마다 변경
    var transitionDelay = 600; // 애니메이션 전환 속도 (Enfold 기본 값)
    var $tabs = $(".av-tab-section-tab-title-container .av-section-tab-title");
    var tabCount = $tabs.length;
    var currentIndex = 0;
    var tabSlider = null;
    var isUserInteracted = false;

    function switchTab() {
        currentIndex = (currentIndex + 1) % tabCount;

        // 현재 활성화된 탭을 클릭하여 변경
        $tabs.eq(currentIndex).trigger("click");
    }

    function startAutoSlide() {
        if (tabSlider) return; // 중복 실행 방지
        tabSlider = setInterval(switchTab, tabInterval);
    }

    function stopAutoSlide() {
        clearInterval(tabSlider);
        tabSlider = null; // `null`로 초기화하여 재실행 가능하도록 설정
    }

    // 오토 슬라이드 시작
    startAutoSlide();

    // 사용자가 탭을 클릭하면 자동 슬라이드 멈추고 일정 시간 후 다시 시작
    $tabs.on("click", function () {
        if (!isUserInteracted) {
            isUserInteracted = true;
        }
        stopAutoSlide();
        setTimeout(function () {
            isUserInteracted = false;
            startAutoSlide();
        }, 10000); // 10초 후 다시 자동 슬라이드 시작
    });

    // 첫 번째 탭을 강제로 클릭하여 초기화
    $tabs.eq(0).trigger("click");
});

개선된 점

setInterval() 중복 실행 방지

• startAutoSlide() 함수에서 if (tabSlider) return; 조건을 추가하여 한 번만 실행되도록 설정.
• stopAutoSlide()에서 clearInterval(tabSlider); 실행 후 tabSlider = null;로 초기화하여 다시 실행 가능하도록 수정.

사용자 클릭 이벤트 처리

• 사용자가 클릭하면 isUserInteracted 변수를 true로 변경하여 수동 조작 시 오토 슬라이드 중지.
• 10초 후 isUserInteracted를 false로 다시 변경하여 자동 슬라이드 재개.

애니메이션 유지

• setTimeout()을 switchTab() 안에서 사용하지 않고, 사용자 인터랙션 후 재실행 시에만 사용하여 중복 실행을 방지.