[ 解決済 ] VKスライダー：PC画面で画像3枚表示、モバイル画面で画像1枚で表示させたい。

[With]

■ WordPress のバージョン
5.8.2

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
14.12.2

■ Pro Unit のバージョン
0.13.2

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
VKスライダー
・エフェクト「スライド」に設定。
・複数の表示設定
　１度に表示する画像の枚数3
　１度の動作で動かす枚数1
・スライダーを3つ
・スライダーごとに1枚の画像を設置。

PC画面では画像3枚で表示
スマートフォンでは画像1枚で表示させたい。

画像3枚をスマートフォンで見ると
とても小さく表示されるので1枚表示にしたいです。
どうすれば出来ますか。

どうぞ宜しくお願いします。

■ 自分で試した事
VKスライダー
・エフェクト「スライド」に設定。

モバイル設定の高さを調整しますが枚数が変わりません。

■ 症状が発生するブラウザ
Google Chrome

■ 実際の症状
VKスライダー
・エフェクト「スライド」に設定。
・複数の表示設定
　１度に表示する画像の枚数3
　１度の動作で動かす枚数1
・スライダーを3つ
・スライダーごとに1枚の画像を設置。

画像3枚をスマートフォンで見ると
画像3枚がとても小さく表示される。

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[With]

該当URL 本文中の
「Lightningなら下記のようなサイトが簡単に作成できます」
このように表示させたい。

スライダーでPCでは4枚表示
スマートフォンでは2枚で表示されるようです。

[対馬 俊彦]

該当URLのサイトでは、

* 4枚のスライダーブロック
* 2枚のスライダーブロック

の2つを作って、ブロックの非表示設定を使って画面サイズによって出し分けています。

[With]

該当URLのサイトでは、
* 4枚のスライダーブロック
* 2枚のスライダーブロック
の2つを作って、ブロックの非表示設定を使って画面サイズによって出し分けています。
/////////////////////////////////////////

ご連絡を頂き、誠にありがとうございます。
該当URLのサイトでは7枚の画像を使用しておりました。

該当URLのサイトの挙動同様にするには
どうすれば良いのか以上の操作で検証しております。

スライダーブロックをそのまま２つ作成すると
２段で表示されてしまいます。

非表示設定は
非表示 ( 画面サイズ : xs )を有効
小さいサイズにすると非表示になります。

非表示設定はどのような場合に
使用する機能なのでしょうか。
利用方法が分からないので利用しておりませんでした。

どうぞ宜しくお願いします。

[うなこ]

withさま

非表示設定は、オンにしたサイズがその画面サイズで非表示になります。

▼xs～xxl各サイズの範囲は以下のように設定されています

xs：～576px
sm：576px ～768px
md：768px～992px
lg：992px～1200px
xl：1200px～1400px
xxl：1400px～

Lightningのサイト「Lightningなら下記のようなサイトが簡単に作成できます」の箇所に設置しているスライダーブロックは
以下の手順で配置しています。

【01】スライダーブロックをPCサイズ用とスマホサイズ用に２つ設置します

【02】PCサイズ用は「複数の表示設定」の「一度に表示する画像の枚数」を４、「一度の動作で動かす枚数」を1、
「非表示設定」は、非表示 ( 画面サイズ : xs )／非表示 ( 画面サイズ : sm )をオンにします。

【03】スマホサイズ用は「複数の表示設定」の「一度に表示する画像の枚数」を2、「一度の動作で動かす枚数」を1、
「非表示設定」は、非表示 ( 画面サイズ : xxl )／非表示 ( 画面サイズ : xl )／非表示 ( 画面サイズ : lg )／非表示 ( 画面サイズ : md )　をオンにします。

————————–

以前、対馬さまからも「VK Block Pro のカルーセルのレスポンシブ強化」のご要望をいただきまして、VK Blocks Proのissueにもたてさせていただいております。

https://github.com/vektor-inc/vk-blocks-pro/issues/469

現状は他の作業も立て込んでおりまして実装までは時間がかかりますので、
今回のようにスライダーブロックをPCとモバイル用に２つ設置して、非表示設定で出しわけをお願いいたします。

よろしくお願いいたします。

▼非表示設定の説明ページ「画面サイズによる非表示設定」部分

WordPress標準ブロックのスタイル拡張

【追記】
VK Blocks Proは限定公開のPrivateリポジトリのため、issueが見えなくなっておりますが、ちゃんとissueには追加されておりますのでご安心ください。

[With]

うなこ様
ご連絡を頂き、誠にありがとうございます。

非表示設定で同様の動作が出来ました。
丁寧にご説明を頂き、感謝いたします。
このような方法があったのですね。
とてもうれしいです。
さらなる可能性を発見した感じです。

対馬様、うなこ様、
誠にありがとうございました。

[投稿者]

投稿