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

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

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

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

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

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

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="oNPRNmW" data-user="mazaka" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/mazaka/pen/oNPRNmW">
  Untitled</a> by mazaka (<a href="https://codepen.io/mazaka">@mazaka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


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

<h3>activeクラスを自動付与</h3>

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

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

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


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

<h3>連番2種を自動付与</h3>

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

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

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

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

<h3>2回ループを廻す</h3>

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

```php: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>
```
<h3>フェードイン式にする</h3>
スライド式ではなくフェードインでスライドが切り替わるようにするには、carousel-fadeクラスを追加するだけ！でした。


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

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