// #오토-센터링 루프 캐러셀
// 이 코드를 코드스니펫 플러그인을 통해 삽입하세요
// 그리고 적용할 캐러셀에 custom-centered-carousel이라는 클래스를 부여하세요
add_action('wp_footer', function() {
?>
## 🚀 엘레멘터 커스텀 캐러셀 최종 완성 가이드
이번 업데이트는 두 가지 핵심 개선 사항을 포함합니다.
아이콘 크기 연동: 재생/정지 버튼의 아이콘 크기가 엘레멘터의 화살표 크기 설정에 자동으로 연동됩니다.
페이지네이션 스타일 완벽 제어: 이제 페이지네이션(숫자)의 글자 색상과 활성 색상을 엘레멘터 편집기에서 완벽하게 제어할 수 있습니다.
### 1단계: 최종 숏코드 functions.php에 적용하기
워드프레스 관리자 메뉴에서 **[외모] → [테마 파일 편집기] → functions.php**를 선택하고, 기존에 추가했던 숏코드 함수를 아래의 최종 코드로 전체 교체해주세요.
💡 Tip:
functions.php직접 수정보다는 Code Snippets 플러그인을 사용하면 훨씬 안전하고 편리합니다.
PHP
<?php
// 'elementor_carousel_nav' 라는 이름의 숏코드를 등록합니다.
add_shortcode('elementor_carousel_nav', 'create_custom_carousel_nav_shortcode');
function create_custom_carousel_nav_shortcode($atts) {
// 숏코드에 target 속성이 없으면 아무것도 실행하지 않습니다.
if (empty($atts['target'])) {
return '';
}
// 숏코드에서 전달받은 target 속성 값을 변수에 저장합니다.
$carousel_selector = esc_attr($atts['target']);
// Heredoc 문법을 사용해 CSS와 JavaScript 코드를 정리합니다.
$output = <<<HTML
<style>
/* --- 1. JS가 생성할 전체 네비게이션 컨테이너 --- */
{$carousel_selector} .custom-nav-wrapper {
position: absolute;
bottom: 30px;
left: 40px;
z-index: 10;
display: flex;
align-items: center;
gap: 15px;
}
/* --- 2. 버튼들을 감싸는 컨트롤 박스 --- */
{$carousel_selector} .custom-controls-box {
display: flex;
align-items: center;
gap: 8px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50px;
padding: 5px 10px;
height: auto;
}
/* --- 3. 각 요소들의 기본 스타일 초기화 및 재정의 --- */
{$carousel_selector} .elementor-swiper-button,
{$carousel_selector} .custom-play-pause {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
width: auto !important;
height: auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer;
}
/* 페이지네이션(Fraction) 위치 초기화 */
{$carousel_selector} .swiper-pagination.swiper-pagination-fraction {
position: static !important;
transform: none !important;
top: auto !important;
left: auto !important;
bottom: auto !important;
right: auto !important;
display: block !important;
line-height: 1.2;
}
/* 🔄 변경점 2: 엘레멘터 UI에서 색상 제어가 가능하도록 color 관련 코드를 모두 제거했습니다. */
/* 이제 엘레멘터의 [스타일] > [네비게이션] > [페이지네이션] 설정이 100% 적용됩니다. */
/* 화살표 버튼 아이콘 스타일 */
{$carousel_selector} .elementor-swiper-button svg {
width: 1em;
height: 1em;
fill: #fff !important; /* 화살표 색상은 흰색으로 유지하되, 필요시 수정 가능 */
opacity: 0.7;
transition: opacity 0.3s;
}
{$carousel_selector} .elementor-swiper-button:hover svg {
opacity: 1;
}
/* 🔄 변경점 1: 재생/정지 아이콘 크기를 화살표 크기 변수(--e-n-carousel-arrow-size)에 연동 */
/* 재생/정지 버튼 SVG 아이콘 스타일 */
{$carousel_selector} .custom-play-pause svg {
width: var(--e-n-carousel-arrow-size, 25px);
height: var(--e-n-carousel-arrow-size, 25px);
fill: #ffffff;
opacity: 0.7;
transition: opacity 0.3s;
}
{$carousel_selector} .custom-play-pause:hover svg {
opacity: 1;
}
/* 재생/정지 상태에 따른 아이콘 표시 */
{$carousel_selector} .custom-play-pause.playing .play-icon { display: none; }
{$carousel_selector} .custom-play-pause.playing .pause-icon { display: block; }
{$carousel_selector} .custom-play-pause.paused .play-icon { display: block; }
{$carousel_selector} .custom-play-pause.paused .pause-icon { display: none; }
</style>
<script>
jQuery(document).ready(function($) {
var carousel_selector = '{$carousel_selector}';
var targetCarousel = $(carousel_selector);
if (targetCarousel.length) {
setTimeout(function() {
var swiper = targetCarousel.find('.swiper')[0].swiper;
if (swiper) {
var \$pagination = targetCarousel.find('.swiper-pagination-fraction');
var \$prevArrow = targetCarousel.find('.elementor-swiper-button-prev');
var \$nextArrow = targetCarousel.find('.elementor-swiper-button-next');
var \$navWrapper = $('<div class="custom-nav-wrapper"></div>');
var \$controlsBox = $('<div class="custom-controls-box"></div>');
var playIconSVG = '<svg class="play-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>';
var pauseIconSVG = '<svg class="pause-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg>';
var \$playPauseBtn = $('<div class="custom-play-pause">' + pauseIconSVG + playIconSVG + '</div>');
\$controlsBox.append(\$prevArrow).append(\$playPauseBtn).append(\$nextArrow);
\$navWrapper.append(\$pagination).append(\$controlsBox);
targetCarousel.append(\$navWrapper);
\$playPauseBtn.addClass('playing');
\$playPauseBtn.on('click', function() {
if (\$(this).hasClass('playing')) {
swiper.autoplay.stop();
\$(this).removeClass('playing').addClass('paused');
} else {
swiper.autoplay.start();
\$(this).removeClass('paused').addClass('playing');
}
});
}
}, 150);
}
});
</script>
HTML;
return $output;
}
?>
### 2단계: 엘레멘터에서 숏코드 사용 및 스타일 설정하기
숏코드 사용법은 이전과 동일합니다.
엘레멘터 페이지에 ‘Shortcode’ 위젯을 추가합니다.
위젯 안에 아래와 같이 숏코드를 입력합니다.
YOUR_WIDGET_ID는 캐러셀 위젯의 고유 ID(data-id)로 변경해주세요.
이제 엘레멘터 편집기에서 모든 스타일을 직접 제어할 수 있습니다.
위치: 캐러셀 위젯 선택 → [스타일] 탭 → [네비게이션]
화살표 & 재생/정지 아이콘 크기:
화살표섹션의크기슬라이더를 조절하면 세 가지 아이콘의 크기가 모두 함께 변경됩니다.페이지네이션 스타일:
페이지네이션섹션에서타이포그래피(글자 크기, 굵기 등)와색상, **활성 색상**을 자유롭게 변경할 수 있습니다.