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;
}

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

웹사이트에서는 다양한 종류의 슬라이드가 사용될 수 있습니다. 주로 사용되는 슬라이드 종류는 다음과 같습니다
  1. 이미지 슬라이더
    웹사이트에서 이미지를 보여주는 데 사용되는 슬라이더입니다. 여러 개의 이미지가 일정 간격으로 전환되며, 사용자에게 시각적인 효과를 제공합니다.

    • 여러 개의 이미지를 전환하며 보여주는 슬라이더입니다.
    • 제품, 포트폴리오, 이미지 갤러리 등에서 사용됩니다.
    • 시각적으로 매력적인 이미지를 강조하고자 할 때 유용합니다.
  2. 캐러셀 슬라이더
    캐러셀 슬라이더는 여러 개의 아이템(이미지, 텍스트, 동영상 등)을 가로로 나란히 배치하여 보여주는 슬라이더입니다. 사용자는 좌우로 슬라이드를 넘겨 다른 아이템을 볼 수 있습니다.

    • 여러 개의 아이템(이미지, 텍스트, 동영상 등)을 가로로 나열하여 보여주는 슬라이더입니다.
    • 좌우로 슬라이드하여 다른 아이템을 볼 수 있습니다.
    • 다양한 콘텐츠를 한 공간에 효과적으로 표현할 수 있습니다.
  3. 텍스트 슬라이더
    텍스트 슬라이더는 여러 개의 텍스트 블록이 일정한 간격으로 전환되는 슬라이더입니다. 주로 제품 또는 서비스의 특징이나 혜택을 강조하기 위해 사용됩니다.

    • 여러 개의 텍스트 블록이 일정한 간격으로 전환되는 슬라이더입니다.
    • 특징, 혜택, 공지사항 등을 강조하고자 할 때 사용됩니다.
    • 짧고 간결한 텍스트로 정보를 전달하며 시각적인 효과를 줄 수 있습니다.
  4. 동영상 슬라이더
    동영상 슬라이더는 여러 개의 동영상을 보여주는 슬라이더입니다. 각 동영상은 자동으로 재생되거나 사용자의 조작에 의해 재생될 수 있습니다.

    • 여러 개의 동영상을 재생하거나 전환하여 보여주는 슬라이더입니다.
    • 동영상 콘텐츠를 효과적으로 홍보하거나 시각적으로 인상적인 경험을 제공할 수 있습니다.
  5. 배너 슬라이더
    배너 슬라이더는 주로 웹사이트의 상단이나 하단에 배치되어 다양한 프로모션 또는 알림을 보여주는 슬라이더입니다. 주로 광고나 중요한 정보를 전달하기 위해 사용됩니다. 이 외에도 다른 종류의 슬라이드가 있을 수 있으며, 웹사이트의 목적과 디자인에 따라 다양하게 활용될 수 있습니다.

    • 상단이나 하단에 배치되어 프로모션, 광고, 알림 등을 보여주는 슬라이더입니다.
    • 주목을 끌거나 중요한 정보를 전달하기 위해 사용됩니다.
    • 다양한 디자인과 애니메이션을 활용하여 시선을 사로잡을 수 있습니다.


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

슬라이드 종류를 선택할 때 고려해야 할 요소는 다음과 같습니다
  1. 목적과 콘텐츠
    웹사이트의 목적과 전달하고자 하는 콘텐츠를 고려해야 합니다. 제품을 소개하거나 이미지를 강조하려면 이미지 슬라이더가 적합하고, 다양한 콘텐츠를 효과적으로 전달하고자 할 경우 캐러셀 슬라이더를 고려할 수 있습니다.
  2. 사용자 경험
    사용자가 웹사이트를 편리하게 이용할 수 있는 경험을 고려해야 합니다. 너무 많은 슬라이드를 사용하거나 전환 속도가 빠르면 사용자가 정보를 파악하기 어렵고 짜증을 낼 수 있습니다. 사용자가 원하는 콘텐츠에 쉽게 접근하고 조작할 수 있도록 고려해야 합니다.
  3. 디자인 일관성
    웹사이트의 디자인 일관성을 유지하는 것이 중요합니다. 선택한 슬라이드 종류가 웹사이트의 전반적인 디자인과 어울리고 조화롭게 보여져야 합니다. 색상, 폰트, 레이아웃 등과 일관성을 유지하면 사용자가 웹사이트를 더욱 신뢰하고 쾌적한 경험을 할 수 있습니다.
  4. 모바일 호환성
    모바일 사용자의 증가로 모바일 호환성도 고려해야 합니다. 선택한 슬라이드 종류가 모바일 기기에서도 원활하게 작동하고 콘텐츠가 잘 표시되는지 확인해야 합니다. 반응형 디자인을 적용하여 다양한 디바이스에서 최적의 사용자 경험을 제공할 수 있습니다.
  5. 성능과 로딩 속도
    너무 많은 슬라이드나 무거운 콘텐츠를 사용하면 웹사이트의 성능과 로딩 속도에 영향을 줄 수 있습니다. 사용자가 빠르게 웹사이트에 접근하여 내용을 확인할 수 있도록 최적화된 슬라이드를 선택해야 합니다.
  6. 접근성
    웹사이트의 접근성을 고려해야 합니다. 슬라이드에 적절한 대체 텍스트를 제공하고 웹 접근성 지침을 준수하여 시각, 청각, 운동 장애를 가진 사용자들도 웹사이트를 이용할 수 있도록 해야 합니다. 이러한 요소들을 고려하여 적합한 슬라이드 종류를 선택하면 웹사이트의 사용자 경험과 정보 전달 효과를 극대화할 수 있습니다.