enfold tab slider 오토슬라이드 기능 추가하기

Enfold tab slider 오토슬라이드 기능 추가하기

Enfold 테마는 다양한 사용자 정의 기능을 제공하며, 탭 슬라이더(Tab Slider)를 포함한 다양한 슬라이더 형식을 지원합니다. 오토 슬라이드(자동 슬라이드) 기능은 대부분의 슬라이더 유형에서 지원됩니다. Enfold 테마의 탭 슬라이더에서 오토 슬라이드 기능을 사용할 수 있는지 확인하려면 Enfold 테마의 공식 문서를 참조하거나, 테마의 설정 옵션을 살펴보는 것이 좋습니다.

확인한 결과 Enfold에서는 Tab sldier에서는 오토 슬라이드 기능을 제공하지 않고 있습니다. 해당 기능을 구현하기위해서는 아래 코드를 추가하여 구현할 수 있습니다.

add_action('wp_footer', 'enfold_auto_tab_slider_loop');
function enfold_auto_tab_slider_loop()
{
?>
    <script>
        jQuery(document).ready(function($) {
            setInterval(function() {
                var active_tab = $('.av-active-tab-title');
                var next_tab = active_tab.next('.av-section-tab-title');

                if (next_tab.length === 0) {
                    next_tab = $('.av-section-tab-title').first();
                }

                next_tab.trigger('click');
            }, 5600); // 5 seconds


        });
    </script>
<?php
}
/* 위 코드는 오토 슬랑리드 기능을 추가하는것으로 function.php 상에 추가하여 구현합니다.*/

위 코드로 오토슬라이드를 구현할수 있으나, 마지막 컨텐츠에서 첫 컨텐츠로 이동이 자연스럽게 연결되지 않는 문제를 경험하게 됩니다.

관련해서 자연스러운 연결을 하기위해 아래 코드를 추가합니다.

add_action('wp_enqueue_scripts', 'enfold_custom_tab_transition');
function enfold_custom_tab_transition()
{
    wp_enqueue_script('enfold-custom-tab-transition', get_stylesheet_directory_uri() . '/wp-content/themes/enfold-child/js/custom-tab-transition.js', array('jquery'), false, true);
}

위코드를 추가하기위해서는 child-theme 폴더안에 해당 모션에 대한 제이쿼리 파일을 불러와야합니다. 아래코드는 슬라이드의 변경될때 Class를 추가 삭제하여 자연스러운 모션을 추가하는것으로 생각하면됩니다.

jQuery(document).ready(function ($) {
    $('.av-section-tab-title').on('click', function (e) {
        e.preventDefault();

        if (!$(this).hasClass('av-active-tab-content')) {
            var active_tab = $('av-active-tab-content');
            var next_tab = $(this);
            var active_content = active_tab.next('.av-layout-tab');
            var next_content = next_tab.next('.av-layout-tab');

            active_tab.removeClass('av-active-tab-content');
            next_tab.addClass('av-active-tab-content');

            active_content.fadeOut(600, function () {
                next_content.fadeIn(600);
            });
        }
    });
});

위 코드를 추가 후 css 상에서 아래 코드를 추가하여 해당 기능을 사용할 수 있습니다.

.av-layout-tab {
    display: none;
    opacity: 0;
    transition: all 1s ease-in-out;
}

.av-layout-tab.av-active-tab-content {
    display: block;
    opacity: 1;
    bottom: 0px;
}

웹사이트에서 사용되는 슬라이드의 종류 알아보기

슬라이드 종류를 선택할 때 고려해야할 요소는 무엇일까?