[ 解決済 ] トップページスライドショーを全画面表示したい

VWSとは フォーラム Lightning [ 解決済 ] トップページスライドショーを全画面表示したい

[ 解決済 ] トップページスライドショーを全画面表示したい

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

    HANA
    参加者
    制作実績

    ■ WordPress のバージョン
    6.7

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

    ■ テーマの種類
    Lightning ( G3 )

    ■ テーマのバージョン
    15.27.1

    ■ スキンの種類
    プレーン

    ■ 期待する動作
    トップページスライドショーを全画面表示したいです。

    ■ 自分で試した事
    CSSでlightning_swiperにheight:100vhを入れてみたのですが、
    lightning_swiperコンテナは全画面になっているようなのですが、
    画像がうまく全画面になりませんでした。

    ご教授いただければ有難いです。

    ■ 症状が発生するブラウザ
    EGGE、クローム

    ■ 実際の症状
    トップページスライドショーを全画面表示したい

    ※今後、カスタマイズなどに全画面の設定を実装する予定はありますか?

    #103718

    画像の高さを 100vh にすれば、ご希望の形になると思います。

    この ↓ CSS を試してみてください。

    .ltg-slide picture img {
        height: 100vh;
        object-fit: cover;
    }

    【以下、追記です】

    少しだけ手間は増えますが、ベクトルの松田さんがすすめているやり方にするといいです。

    個人的にはカバーブロックを使っているブロックパターンがおすすめです。
    フォーカルポイントという設定を使って画像の表示位置をコントロールできますので、
    ひとつの画像で画面幅が異なるデバイスに対応できます。

    #103715

    mk
    モデレーター

    日頃よりLightningのご利用ありがとうございます。
    ベクトルスタッフの松田です。

    トップページスライドショーでは、スライドの高さは画像の高さに依存する仕様となっております。
    そのため、柔軟なレイアウトをご希望の場合はトップページスライドショーではなく、スライダーブロックを使用されることをおすすめいたします。

    Lightning のトップページスライドショーを VK Blocks のスライダーブロックでカスタマイズする

    例えば https://patterns.vektor-inc.co.jp/vk-patterns/hero-area-default-slider/
    をコピペし、スライダーをクリックすると右パネルに「高さ」という項目がありますので、それぞれのデバイスの高さ設定を100vhなどにしてみてください。フロントエンド上でご希望の状態になるかと思われます。
    なお、トップページ用にスライダーブロックを使用する場合は、外観 > カスタマイズ > Lightning トップページスライドショー では「スライドを非表示にする」の設定にしてください。

    また、上記の他にも様々なスライダーのパターンブロックがありますのでよろしければ見ていただけたらもっとご希望のものに近いものがあるかもしれません。
    https://patterns.vektor-inc.co.jp/?post_type=vk-patterns&pattern-category=slider&s=&supported-themes_operator=or&license-classification_operator=or&pattern-type_operator=or&pattern-industry_operator=or&pattern-category_operator=and&pattern-product_operator=or&demo-site_operator=or&vkfs_form_id=11755

    どうぞよろしくお願いいたします。

    Attachments:
    You must be logged in to view attached files.
    #103765

    HANA
    参加者
    制作実績

    対馬 様

    ご指導いただいたCSSで無事、全画面表示が出来ました。
    有難うございました。

    松田 様

    ご指導有難うございます。
    スライダーブロックの存在は知っております。

    これは好みの問題になってしまうかと思うのですが、現在のスライダーブロックは、設定した画像が枚数分、縦に並んで表示されるのですが、これがどうにも馴染めずにおります。
    特にトップページに表示するスライダーに関しては、カスタマイズから管理できる既存のトップページスライドショーの方が使い勝手が良く感じます。PCとスマホで異なった画像を設定する場合も楽ですし。全画面表示がボタン一発で可能になったらかなり使い勝手が良くなると思いました。
    御意見まで。

    #103766

    mk
    モデレーター

    お世話になっております。対馬さんの方法で解決したようでなによりです。
    もしよろしければ対馬さんのコメントにベストアンサーをつけていただけますと幸いです。

    また、貴重なご意見ありがとうございます。今回の頂戴致しましたご意見は社内で検討させていただきます。
    ※可能な限り検討させていただきたく思いますが、検討し実装して初めて分かることもあるため、実装することが難しい場合もございます。

    なお、ご存知でしたら申し訳ありませんが、現在スライダーブロックでは縦積みだけでなくフロントエンドでの表示のようにプレビューできるモードもございます。こちら、今後のご参考にしていただけたら幸いです。

    VK Blocks 1.69.0 でスライダーブロックに編集モードを追加しました

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

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