ギャラリーブロックをスライドショーにしたカスタマイズ例

【2023.6.3】Lightning のアップデートに伴い、クラス名を変更した。

追加 CSS クラス を以下のように指定して、トップページのスライドショーと同じ動作をさせている。

下図の先頭のグループのクラス名を以下のように変更してある。
【変更前】lightning_swiper-container swiper-container
【変更後】lightning_swiper swiper swiper-container

カスタム CSS に以下のように入力してある。

body .is-layout-flex.swiper-wrapper {
    flex-wrap: nowrap;
    height: 50vh;
}

/* bullet どうしの間隔を持たせてある。 */
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 4px !important;
}

.swiper-wrapper.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    background: transparent;
    padding-bottom: 25px;
    font-size: 1.5em;
    text-shadow: 2px 2px 3px #000;
    font-family: Hiragino Mincho ProN,"游明朝",serif;
    font-weight: bold;
}