【カスタマイズ例】スライダーで新着投稿をカルーセル表示

VK Blocks Pro の 投稿リスト と スライダー を使った、~~最新6件~~ 最新8件の新着投稿を表示するカルーセルのカスタマイズ例です。

2023.7.6 追記

最近の Lightning および VK Blocks のアップデートにより、組み込まれている Swiper のバージョンが 9.* にアップデートされました。
このことにより、カルーセルを正常に動作させるために同時表示スライド数の倍以上の数のスライドが必要になりました。これに加えて、スライドを中央に配置する場合はさらに2枚のスライドが必要です。

上記のカルーセルはいままで6件の新着記事をカルーセル表示していましたが、正常動作しなくなったため、記事数を8件に増やしてあります。

備忘録

スライダーブロックに追加 CSS クラス .card-in-text-right を指定してある。

画面幅が 992px より少し大きいあたりで投稿タイトルの行数が増えて見た目が悪くなる（投稿日の表示が欠ける）ので、以下の CSS により投稿タイトルの行数を最大4行に制限してある。

.card-in-text-right .card-intext .card-intext-inner .vk_post_body .vk_post_title {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

最初にスライダーアイテムが一瞬だけ大きく表示されることを防ぐために、以下の CSS を追加してある。

@media (min-width:576px) {
  .wp-block-vk-blocks-slider-item {
    max-width: 50vw;
  }
}

@media (min-width:992px) {
  .wp-block-vk-blocks-slider-item {
    max-width: 25vw;
  }
}

投稿者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら

最適なホームページ

を制作いたします

制作費用	クオリティを落とさずに価格を抑えたサイトを制作します
必要十分	お問い合わせフォーム、新着情報など必要なものが最初から揃っています
サポート	1年間のサポートがついて安心初めてでもホームページを活用できます

もっと詳しく