엘리멘터 Posts 위젯을 사용하여 포스트 슬라이더 만들기

인기 페이지 빌더 플러그인인 엘리멘터의 유료 버전인 Elementor Pro에는 포스트, 페이지, 커스텀 포스트 타입 등의 글들을 리스트 형식이나 그리드 형식(컬럼 포맷)으로 표시할 수 있는 Posts 위젯이 제공됩니다. 포스트 위젯을 사용하여 포스트 슬라이더를 만들 수 있습니다. 그러면 추가적인 플러그인 설치 없이 포스트 슬라이드를 구현할 수 있습니다.

엘리멘터 Posts 위젯을 사용하여 포스트 슬라이더 만들기

위의 영상과 같이 엘리멘터 프로의 포스트 위젯을 Swiper Slider를 사용하여 포스트 슬라이더로 변환할 수 있습니다.

대략적인 순서

다음 과정을 통해 엘리멘터 포스트 슬라이더를 구현할 수 있습니다.

1. Elementor Pro의 Posts 위젯을 추가합니다.
2. 섹션에 post_slide 클래스를 지정합니다.
3. 스와이퍼 슬라이더로 엘리멘터의 포스트 위젯을 슬라이더로 변환하는 jQuery 코드 또는 자바스크립트 코드를 추가합니다.
4. 커스텀 CSS 코드를 추가합니다.

순서대로 살펴보겠습니다.

CSS 클래스 지정하기

먼저 포스트 위젯을 추가하고 포스트 위젯이 추가된 섹션을 선택하고 고급 탭에서 CSS 클래스를 지정합니다.

CSS 클래스 필드에 post_slide를 입력합니다.

자바스크립트 코드 추가하기

다음으로 헤더 섹션에 Swiper Slider 스크립트를 로드하는 코드를 추가합니다. Getting Started With Swiper 문서의 "Use Swiper from CDN"에 제시된 코드를 복사하여 붙여넣기 합니다.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

상기 코드를 WPCode와 같은 플러그인을 사용하여 헤더 섹션에 추가하거나 테마(차일드 테마 설치) 함수 파일에 enquque 방식으로 로드할 수 있습니다.

그리고 푸터 영역에 다음과 같은 자바스크립트 코드를 추가합니다. (Swiper Slider 사이트나 다른 블로그에서 jQuery 코드를 보통 제시할 것입니다. jQuery 코드를 JavaScript로 변환했습니다.)

/**
 * Swiper Integration with Elementor Pro's Posts Widget:
 * This script achieves the following:
 * 1. Waits until the document's content is fully loaded.
 * 2. Finds the main container elements of the Elementor's Posts widget.
 * 3. Adds necessary Swiper classes to the container, wrapper, and individual post elements.
 * 4. Appends Swiper's pagination and navigation elements to the container.
 * 5. Initializes the Swiper slider with specific settings.
 */

document.addEventListener("DOMContentLoaded", function() {
    // Cache main container elements
    const postsContainers = document.querySelectorAll(".post_slide .elementor-widget-container");

    // Iterate over each container and add necessary Swiper classes
    postsContainers.forEach(container => {
        container.classList.add("swiper-container");

        // Find and modify the wrapper within the current container
        let wrapper = container.querySelector(".elementor-posts-container");
        if (wrapper) {
            wrapper.classList.add("swiper-wrapper");

            // Find and modify individual posts within the current wrapper
            let posts = wrapper.querySelectorAll(".elementor-post");
            posts.forEach(post => post.classList.add("swiper-slide"));
        }

        // Append Swiper's pagination and navigation elements to the container
        container.insertAdjacentHTML('beforeend', '<div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>');
    });

    // Initialize Swiper
    new Swiper('.swiper-container', {
        spaceBetween: 30,
        slidesPerView: 3,
        autoplay: true,
        breakpoints: {
            640: {
                slidesPerView: 1,
                spaceBetween: 20
            },
            768: {
                slidesPerView: 2,
                spaceBetween: 40
            },
            1024: {
                slidesPerView: 3,
                spaceBetween: 30
            }
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        }
    });
});

코드는 적절히 수정하여 사용하시기 바랍니다. 1024px 이상의 화면에서는 3개 슬라이드를 표시하도록 설정하였습니다.

CSS 코드로 내비게이션 스타일 조정하기

상기 스크립트는 슬라이드 이전/다음(Previous/Nex) 버튼을 표시하는 HTML 코드를 추가합니다. CSS를 사용하여 내비게이션 아이콘의 스타일을 조정할 수 있습니다. 예시:

/* Swiper Navigation Buttons */
.swiper-button-prev, .swiper-button-next {
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;  /* Arrow color set to white */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    transition: background-color 0.3s;  /* Smooth transition for hover effect */
}

.swiper-button-prev:hover, .swiper-button-next:hover {
    background-color: rgba(0, 0, 0, 0.8);  /* Darken the button on hover */
}

.swiper-button-prev {
    left: -20px;
}

.swiper-button-next {
    right: -20px;
}

/* Arrow styling using Swiper's icon font */
.swiper-button-prev::after, .swiper-button-next::after {
    font-family: "Swiper-icons";
    font-size: 14px !important;  /* Reduced size of arrows further */
    line-height: 1;
    padding: 0;
    text-align: center;
    display: block;
    color: #fff;  /* Arrow color set to white */
}


.swiper-button-prev::after {
    content: 'prev';
}

.swiper-button-next::after {
    content: 'next';
}

/* Remove default background image set by Swiper */
.swiper-button-prev, .swiper-container-rtl .swiper-button-next, 
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: none;
}

/* Swiper Pagination Styles */
.swiper-pagination {
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 1;
    border: none;
}

.swiper-pagination-bullet-active {
    background-color: #fff;
}

엘리멘터 프로에서는 고급 » Custom CSS 섹션에 곧바로 커스텀 CSS 코드를 추가할 수 있습니다.

위와 같이 설정하고 코드를 추가하면 포스트 슬라이더가 작동할 것입니다.

컬럼 갭 조정하기

하지만 슬라이드가 자동 재생되면서 한 번 좌우로 이동할 때 슬라이드 크기(너비)와 일치하지 않아서 조금 어색하게 표시될 것입니다. 즉, 한 번 옆으로 움직일 때 하나의 슬라이드가 옆으로 이동해야 하지만, 하나가 완전히 이동하지 않고 약간의 여백이 추가됩니다.

이 문제의 원인은 포스트 위젯에서 컬럼(그리드) 형식으로 포스트를 표시할 때 포스트 사이에 갭(gap)을 추가했기 때문입니다. Columns gap을 "0"으로 설정하면 이 문제가 해결됩니다.

Posts 편집 패널의 스타일 탭에서 Columns Gap 옵션을 "0px"로 설정합니다.

이제 유튜브 동영상에서와 같이 포스트 슬라이더가 작동할 것입니다.

참고

• 엘리멘터 포스트 위젯: 이미지를 라이트박스 팝업으로 표시하는 방법
• 워드프레스 Divi 테마, AI로 이미지와 텍스트를 무제한 생성 가능한 Divi AI 출시(+ Divi Code AI 추가)