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

VWSとは フォーラム Lightning [ 解決済 ] VKスライダー:PC画面で画像3枚表示、モバイル画面で画像1枚で表示させたい。

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

  • このトピックには5件の返信、3人の参加者があり、最後にWithにより2年、 4ヶ月前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #58859

    With
    参加者

    ■ WordPress のバージョン
    5.8.2

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

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

    ■ テーマのバージョン
    14.12.2

    ■ Pro Unit のバージョン
    0.13.2

    ■ スキンの種類
    Origin III

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

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

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

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

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

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

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

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

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

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


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

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

    #58860

    With
    参加者

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

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

    #58873

    該当URLのサイトでは、

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

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

    #58874

    With
    参加者

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

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

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

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

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

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

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

    #58875

    うなこ
    モデレーター

    withさま

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

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

    xs:~576px
    sm:576px ~768px
    md:768px~992px
    lg:992px~1200px
    xl:1200px~1400px
    xxl:1400px~

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

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

    【02】PCサイズ用は「複数の表示設定」の「一度に表示する画像の枚数」を4、「一度の動作で動かす枚数」を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とモバイル用に2つ設置して、非表示設定で出しわけをお願いいたします。

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

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

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

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

    • この返信は2年、 4ヶ月前にうなこが編集しました。
    • この返信は2年、 4ヶ月前にうなこが編集しました。
    • この返信は2年、 4ヶ月前にうなこが編集しました。
    • この返信は2年、 4ヶ月前にうなこが編集しました。
    #58885

    With
    参加者

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

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

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

6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。