エレメント Posts ウィジェットを使用してポストスライダを作成する

人気ページビルダープラグインエレメントの有料版 Elementor Proには、ポスト、ページ、カスタムポストタイプなどの記事をリスト形式またはグリッド形式（列形式）で表示できるPostsウィジェットが用意されています。 ポストウィジェットを使用してポストスライダを作成できます。 これにより、追加のプラグインをインストールせずにポストスライドを実装できます。

エレメント Posts ウィジェットを使用してポストスライダを作成する

上の映像のように エレメンプロのポストウィジェットをSwiper Sliderを使用してポストスライダに変換できます。

おおよその順序

次の手順で、エレメントポストスライダを実装できます。

1. Elementor ProのPostsウィジェットを追加します。
2. セクションに post_slide クラスを指定します。
3. スワイパースライダで、エレメンタのポストウィジェットをスライダに変換するjQueryコードまたはJavaScriptコードを追加します。
4. カスタムCSSコードを追加します。

順番に見てみましょう。

CSSクラスの指定

まず、ポストウィジェットを追加し、ポストウィジェットが追加されたセクションを選択します。 高級 タブでCSSクラスを指定します。

CSSクラスフィールドに post_slideを入力します。

JavaScriptコードを追加する

次に、ヘッダーセクションに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>

上記のコード WPコードなどのプラグインを使用してヘッダーセクションに追加するか、テーマ（チャイルドテーマ インストール）関数ファイルにenquque方式でロードできます。

次に、フッタ領域に次のJavaScriptコードを追加します。 （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コードを追加できます。

上記のように設定してコードを追加すると、ポストスライダが機能します。

列ギャップを調整する

ただし、スライドが自動再生され、一度左右に移動すると、スライドのサイズ（幅）と一致せず、少しぎこちなく表示されます。 つまり、一度横に移動すると、スライドが横に移動する必要がありますが、XNUMXつが完全に移動せずに少し余白が追加されます。

この問題の原因は、ポストウィジェットで列（グリッド）形式でポストを表示するときにポスト間にギャップを追加したためです。 Columns gapを「0」に設定すると、この問題は解決されます。

Posts 編集 パネルの 스타일 タブで カラムギャップ オプションを「0px」に設定します。

これで、YouTubeの動画と同様にポストスライダーが機能します。

参照

• エレメントポストウィジェット：画像をライトボックスポップアップとして表示する方法
• WordPress Diviテーマ、AIで画像やテキストを無制限に生成可能なDivi AIをリリース（+ Divi Code AIを追加）