Bootstrap5 カルーセル×WPカスタム投稿 #PHP

.................
wordpress 6.2
Bootstrap5
Win10
.................

Bootstrapのサムネイルつきカルーセルをつくりたい

公式ドキュメントにサムネイルつきカルーセルのサンプルがないので、Codepenで見つけたありがたいサンプルをカスタマイズする。

Bootstrap5 Carousel Examples
https://codepen.io/Shylmysten/pen/rNdbZqX

まずはこれを実装先にページに合うよう整形、フェードインもさせるようにしたい。

See the Pen Untitled by mazaka (@mazaka) on CodePen.

WPカスタム投稿のループでカルーセルを自動更新させたい

activeクラスを自動付与

カルーセルの中の１つの枠carousel-itemには先頭のものにactiveクラスが必要で、これがないと何も表示しない。
先頭のcarousel-itemにactiveをどうにかこうにか自動付与する必要があるんだけど..

ループ内では出来ない(※てかやり方知らない)のでループ外でjsでやることにする。

【JavaScript】要素にclassを追加・削除する【classList】
https://into-the-program.com/classlist/

<script>	
//最初に現れるcarousel-itemにactiveクラスを追加
let elements = document.getElementsByClassName("carousel-item");	
elements[0].classList.add("active");	
</script>

連番2種を自動付与

カルーセルは3つの要素で構成されているが、
インジケータ(サムネイル)／カルーセル(スライド)／前後ボタン
ボタンタグにある2つのクラスに連番がインジケータとカルーセルを連動させているモヨウ。

①data-bs-slide-toクラス　→0から始まる(次のボタンはどれ?という役割※たぶん)
②aria-labelクラス　→1から始まる(このボタンに対するスライドはどれなの?という役割※たぶん)

連番振るのってどうすればいいの..と。
ループの中にシレっと下記を追加してみる。

php

$count = -1;//初期化 ①data-bs-slide-toクラス用
$slide = $count +2; //②aria-labelクラス用
$count++;

2回ループを廻す

インジケータとカルーセル部分で2回ループを書くのはスマートではないと思いますが..
ループの全体像がこちらです。

HTML+php

<!--Bootstrap5 carousel with thumbs at top page-->

<div id="myCarouselOne" class="carousel carousel-fade" data-bs-ride="carousel" data-bs-pause="false"
    data-bs-interval="8000">

    <div class="carousel-indicators">

        <?php        
        $paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
        $args = array(
        'post_type' => "interview",//投稿タイプ
        'posts_per_page' => 3,
        'paged' => $paged,
        );
    
        $count = -1;//初期化 ①data-bs-slide-toクラス用
        $slide = $count +2; //②aria-labelクラス用
        $query = new WP_Query($args);

        //loop1 サムネイル

        while ( $query->have_posts() ) : $query->the_post(); 
            $count++;?>

            <button type="button" data-bs-target="#myCarouselOne" data-bs-slide-to="<?php echo $count;?>" class="active"
                aria-current="true" aria-label="Slide <?php echo $slide;?>">
                <?php the_post_thumbnail('small'); ?>
            </button>
        <?php endwhile;?>
    </div>

    <!--carousel-->
    <div class="carousel-inner">

    <?php 
    //loop2 カルーセル
    while ( $query->have_posts() ) : $query->the_post(); 

            $count++;?>

        <div class="carousel-item">
            <?php the_post_thumbnail('full'); ?>
            <div class="carousel-caption mb-5 text-start text-white">
                <a href="<?php the_permalink(); ?>">
                    <h1 class="col-lg-8 fw-bold"><?php the_title(); ?></h1>
                    <span class="fs-4 fw-bold"><?php the_field('intv_member', $term); ?></span><br>
                    <span class="fw-bold"><?php the_field('when', $term); ?></span>&nbsp;&nbsp;<span
                        class="tx-red fw-bold"><?php the_field('cat', $term); ?></span>
                </a>
            </div>
        </div>

        <?php endwhile;?>

    </div>

    <!--button-->
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarouselOne" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarouselOne" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

<script>
//最初に現れるcarousel-itemにactiveクラスを追加
let elements = document.getElementsByClassName("carousel-item");
elements[0].classList.add("active");
</script>

フェードイン式にする

スライド式ではなくフェードインでスライドが切り替わるようにするには、carousel-fadeクラスを追加するだけ！でした。

HTML

<div id="myCarouselOne" class="carousel carousel-fade" data-bs-ride="carousel" data-bs-pause="false"
    data-bs-interval="8000">

あとはcssでお化粧を施して、きちんと動くものが出来ました。
DEMOがなくてすみません、出来たら展開します。
以上です。