最近はSplideを使ってばかりで、Slackを使うことがほとんどなくなりました。

WordPressならどうせjQuery読み込んでいるんだからSlickでいいのでは？とよく聞きますが、Splideの方が安心なので。今でもAndroid端末にはCPUが弱いものがあります。SplideならGPUで動かすアニメになっているのでそういった端末でもストレスなく動いているはずです。

さて、今回作成したのはWordPressのブロックエディタにて、とっても簡易的に画像スライドを貼るだけのプラグイン。Gutenbergブロック>メディアに「Splideスライドショー」を追加します。

https://github.com/nagaoka-design/splide-block/releases

ver 1.3.0 が最新です。設定の保存機能を加えました。

ギャラリーと同じように複数の画像を選んで置くだけで、Splideのスライドショーができます。

矢印、ページネーション、スライドの角丸、キャプションの位置や配色などは、高度な設定からお好きなclassを付けてカスタムCSSでお好みで調整してください。

読み込むスタイルシートも、□標準CSS（splide.min.css） □最小限CSS（splide-core.min.css） □CSSなし が選べるようになっています。

カスタムCSSの例

/* 余白 */
.sample-slider {
    padding: 30px 0;
}

/* イメージの角丸 */
.sample-slider .splide__slide img {
    border-radius: 8px;
}

/* 矢印の色 */
.sample-slider .splide__arrow {
    height: 4em;
    background: rgba(0,0,0,.8);
    border-radius: 0;
    opacity: 1;
}
.sample-slider .splide__arrow svg {
    fill: #fff;
}
.sample-slider .splide__arrow--prev {
    left: 0;
}
.sample-slider .splide__arrow--next {
    right: 0;
}

/* ページネーションの位置と色 */
.sample-slider .splide__pagination {
    bottom: 10px;
}
.sample-slider .splide__pagination__page {
    background: rgba(0,0,0,.5);
}
.sample-slider .splide__pagination__page.is-active {
    background: #000;
    transform: scale(1);
}

/* キャプションの位置と色 */
.sample-slider .splide__slide-caption {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 8px auto;
    width: 80%;
    padding: 0.2em 1em;
    font-size: 0.875rem;
    text-align: center;
    line-height: 1.2;
    color: #000;
    background-color: rgba(255,255,255,.75);
    border-radius: 99px;
}

投稿ごとにCSSやJSを追加するプラグインはたくさんあります。長いコードではないのでfunctions.phpに書いてもいいのですが、面倒くさかったら私が作ったプラグインもありますのでお使いください。

これについては更新予定はありません。