VK Blocks スライダーブロックのパターン9選（実例編）

スライダーのなかにカラムブロック(2カラム)を設置しました。
スライダーのエフェクトはフェードを選択し、さりげないスライダーになっています。
スライダーをグループブロックで囲み、背景にグラデーションを使っています。グラデーション(白→青)の境い目を0にすることで、背景に青い四角があるように見えます。PC時のみ上下にレスポンシブスペーサーを表示し、ずらし(ブロークングリッド)のようなレウアウトを実現しました。

背景に写真を設定し、テキストをのせただけの標準的なスライダーがもとになっています。
スライダーのエフェクトでフェードを選択、スライダーアイテム内のテキストをすべて同じ内容にすることで、写真だけが入れ替わっているように見えます。
テキストのインライン文字サイズを利用して、メリハリのあるバナーのような効果を狙いました。テキストの上にレスポンシブスペーサを設置し、デバイス毎の高さでPC、タブレット、モバイルでの見え方を調整しています。

カラムブロック(2カラム)の左カラムにスライダーを設置しました。
スライダーアイテムの背景に写真を指定し、見出しとテキストのブロックをのせています。テキストをグループで囲むことで、白い透過の背景を実現しました。背景の写真に合わせて、テキストの位置が変えられるのもポイントです。
さらに全体をグループブロックで囲んで背景を黄色に。ヒーロエリアで視線をひく効果を狙いました。

Lightning トップページスライドショーのようなデザインのスライダーになります。
Lightning トップページスライドショーは、スライドアイテムは3枚まで、要素は決められたものしか入れられませんので、このパターンを使うと柔軟なデザインが可能になります。
スライダーのアイテムも好きな数だけ増やせます。あまり増やしすぎても逆に見られなくなってしまうので多くても5枚までを推奨しています。

カラムの左側にスライドを設置して、スライドアイテムは1度に2枚を表示し、縦長の画像を設置しました。
スライドアイテムの背景に画像を設置して、デバイス毎の高さをそれぞれ入れています。
縦長の画像を使用するとインパクトを与えることができるのと、スマホ画面でより見やすくなり視線が下に流れていきますので、自然とスクロールされて全体を見てもらうのに効果的です。
背景のグレーはグループブロックの背景にグラデーション(グレー→白)でいれています。

「製品紹介」を2枚づつ表示して、スライドさせたパターンです。
2枚づつ表示しているので省スペースで多くの情報が載せられるのと、「製品紹介」という1つの統一した内容をスライドさせているので、「製品紹介」が見たいユーザーの目を惹く効果が期待できます。

Pro版で使用できる「投稿リストブロック」を使用したパターンです。
メインの背景は静止画像にして、投稿リストを1件づつスライド表示することにより、動きに目が惹かれますので、新着の記事をより目立たせることができます。
例えば事業拡大の人材募集など、求人サイトで活躍しそうです。

Pro版で使用できる「投稿リストブロック」を使用したパターンです。
スライドさせることで投稿記事に目が惹かれますので、新着記事を流したり、Pro版で使える「選択投稿リスト」を使用して見てほしい記事をピックアップしても良いかなと思います。製品紹介などでも効果的に使えそうです。
4件同時にスライドしますので、気になる記事がある場合に停止できるように「スワイプ時に自動再生を停止」をオンにしています。

Pro版で使用できる「カスタムCSS」を使用したパターンです。
一定の速度で流れつづける無限ループは「カスタムCSS」とスライダーの設定で実装しています。
無限ループスライダーは、お店の店内や商品の雰囲気をみてもらいたい場面で使えるパターンです。
飲食・求人・サロンなどビジネス全般でご活用ください。