画像が横にスライドするカルーセル・スライダーを設置する方法

今回は、WordPressでプラグインを使わずに横スライドのカルーセル・スライダーを作る方法を紹介します。
任意の固定画像だけで横スライドカルーセルを作る方法です。投稿や固定ページに簡単に設置でき、テーマに合わせたCSSも適用可能です。

1 実装のポイント

ポイントは以下の通りです。

• 投稿や固定ページでショートコード [horizontal-carousel] を使ってスライダーを表示
• functions.php にショートコード生成の PHP を追加
• 横スライドはシンプルな JavaScript で制御（無限ループ対応）
• CSSを調整

2 functions.php にコードを追加

// ------------------------------
// 横スライダー用ショートコード（無限ループ対応）
// ------------------------------
function my_horizontal_carousel_shortcode( $atts ) {
    $images = [
        'https://example.com/wp-content/uploads/2025/09/slide1.jpg',
        'https://example.com/wp-content/uploads/2025/09/slide2.jpg',
        'https://example.com/wp-content/uploads/2025/09/slide3.jpg'
    ];

    $output = '<div class="my-carousel"><div class="carousel-inner">';
    foreach ( $images as $img ) {
        $output .= '<div class="carousel-item">';
        $output .= '<img src="' . esc_url($img) . '" alt="" />';
        $output .= '</div>';
    }
    $output .= '</div></div>';

    return $output;
}
add_shortcode( 'horizontal-carousel', 'my_horizontal_carousel_shortcode' );

// JS 読み込み
function enqueue_horizontal_carousel_script() {
    wp_enqueue_script(
        'horizontal-carousel',
        get_stylesheet_directory_uri() . '/js/horizontal-carousel.js',
        array(),
        '1.0',
        true
    );
}
add_action( 'wp_enqueue_scripts', 'enqueue_horizontal_carousel_script' );
  

記事内で表示する場合：

[horizontal-carousel]
  

3 horizontal-carousel.js にコードを追加

ファイル名：horizontal-carousel.js
保存先：wp-content/themes/child-theme/js/horizontal-carousel.js

// -------------------------
// 横スライダー（無限ループ）
// -------------------------
document.addEventListener('DOMContentLoaded', function() {
    const carousel = document.querySelector('.my-carousel .carousel-inner');
    const items = carousel.querySelectorAll('.carousel-item');
    const total = items.length;

    // 全スライドを複製して末尾に追加（これで無限ループ）
    items.forEach(item => {
        carousel.appendChild(item.cloneNode(true));
    });

    const itemWidth = items[0].offsetWidth + parseInt(getComputedStyle(items[0]).marginRight);
    let index = 0;

    function slideNext() {
        index++;
        carousel.style.transition = 'transform 0.5s ease';
        carousel.style.transform = `translateX(${-itemWidth * index}px)`;

        if (index >= total) {
            setTimeout(() => {
                carousel.style.transition = 'none';
                carousel.style.transform = 'translateX(0)';
                index = 0;
            }, 500);
        }
    }

    setInterval(slideNext, 3000);
});
  

3.1 ディレクトリ構造

4 汎用CSS

/* ------------------------- 
 * 横スライダー
 * ------------------------- */
.my-carousel {
    overflow: hidden;        /* はみ出した部分を非表示に */
    width: 100%;             /* 横幅100%に調整 */
}

.my-carousel .carousel-inner {
    display: flex;           /* 横並びにする */
    flex-wrap: nowrap;       /* 折り返さない */
    width: max-content;      /* 子要素分の幅に自動調整 */
    transition: transform 0.02s linear; /* transform移動をスムーズに */
}

.my-carousel .carousel-item {
    flex: 0 0 300px;         /* 幅固定（300px）で縮まない */
    margin-right: 10px;      /* アイテム間の余白 */
}

.my-carousel img {
    width: 100%;             /* 画像をアイテム幅に合わせる */
    display: block;          /* 下に隙間ができないようにする */
}
  

5 完成イメージ

6 代用プラグイン

もし簡単に済ませたい場合は、以下のプラグインも候補です。

• MetaSlider
• Smart Slider 3
• Swiper Slider

7 まとめ

今回は PHP＋JavaScript で作る横スライドカルーセルを紹介しました。テーマ別の CSS を微調整することで、Lightning や Cocoon でも自然に表示できます。ショートコード [horizontal-carousel] を使えば、どの投稿・固定ページにも簡単にスライダーを設置可能です。

8 関連記事リンク

▶ 画像が切り替わるカルーセル・スライダーを設置する方法

▶ jQueryなしでスライダーを実装する方法（Vanilla JS）