「スライダー」の検索結果

[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.

[Vektor,Inc]

日頃よりご利用いただきありがとうございます。
現象を確認できました。本件について調査しますので今しばらくお待ちくださいませ。
https://github.com/vektor-inc/vk-blocks-pro/issues/2279

なお、スライダーブロックのカスタムCSSで以下を入力すると本件の現象は直ると思われますのでお試しくださいませ。

selector {
    width: 100%;
}

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

[gundam]

■ WordPress のバージョン
6.6.2

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

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。

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

■ テーマのバージョン
15.27.0

■ Pro Unit のバージョン
0.28.0

■ スキンの種類
Origin III

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

■ プラグインの種類・バージョン
ここ最近までは、問題なく表示されていたのですが、気がついたら、スライダーの表示がされなくなりました。

1、編集モードでプレビュー（スライド）この状態だと真っ黒になる。
ちなみに、いつも編集縦配置です。それで編集画面上では、なんの問題もなくいつも通りの表示です。
ページの表示状態では、このプレビュー（スライド）のように真っ黒になる。

2、スクショを添付させていただきましたが、複数のスライダーアイテムで今まで問題なかったのですが、表示がされません。それで、二つ目、3つ目、表示を非表示に設定したところ、画面上では、一つ目が表示され、表示崩れとかはありません。もちろん、一つなので、スライドはされませんけど。

■ 期待する動作
以前のようにきちんと表示させたい。

■ 自分で試した事
表示、非表示設定の切り替え。

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

■ 実際の症状
スライダーが複数表示されると、表示されない。

Attachments:

You must be logged in to view attached files.

[うなこ]

chromeの開発者ツールで確認すると追加したCSSは取り消し線になっていて、元のCSSが有効になっています。

該当URLは確認できませんでしたが、CSSの指定を強くすると反映されると思います。
例えば以下のような形です

.lightning_swiper .mini-content-container-1 .btn {
border-color: #ffffff;
background-color: #060c2d;
}

CSSにつきましてはこちらに詳しく載っていますので、ご確認ください。

できる！CSSカスタマイズ

もしくは、Lightning トップページスライドショーは非表示にして、VK Blocks のスライダーを使用すると自由にボタンの色などを変更しやすいです。

※【外観】>【カスタマイズ】> Lightning トップページスライドショー の 表示設定：スライドを非表示にする で非表示にできます。

スライダー

[Vektor,Inc]

この度はVKパターンライブラリをご利用いただきありがとうございます。

おそらくですが、スライダーアイテムブロックの中のグループブロックを複製してしまっているかもしれません。
リストビューで スライダーアイテム を選択しているかご確認いただけたらと思います。

リストビューの確認方法について、以下をご参照くださいませ。

リストビューでまるわかり -WordPressのブロックエディター

[VWSカスタマー]

■ WordPress のバージョン
6.6.2

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

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

■ テーマのバージョン
バージョン: 15.26.4

■ Pro Unit のバージョン
0.27.1

■ スキンの種類
Origin

■ 期待する動作
ピックアップ導入事例 スライダーのスライダーをデフォルトの3枚から4枚に増やしたいと思います。

■ 自分で試した事
スライド1のブロックをコピペしてもうまく機能しない

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

■ 実際の症状
スライド1のブロックをコピペしてもスライドは4枚にならない

■ その他特記事項
特になし

[うなこ]

お世話になっております、VKパターンライブラリのご利用ありがとうございます。

VK スライダーブロックの カスタムCSS に以下を追加していただけますと、投稿リストの日付が白色になります。

/*投稿リストの日付*/
selector .vk_posts-layout-postListText .postListText_date{
  color:#fff;
}

もしくは、
VK パターンライブラリの「LP_求人_建築_カスタムCSSあり」のお知らせスライダー部分を、WordPressコア側のブロックのクエリーブロックで組み直しましたので（こちらの方が色など個別で指定できるため）、再度コピーしてご利用ください。
※ 元々は VK 投稿リストブロックを使用しておりましたが、テキストのカラーなどの個別の設定がCSSを追記しないとできないため、コア側のブロックで組み直しました。

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

[VWSカスタマー]

ご丁寧なアドバイスに感謝いたします。無事にCSSの書き換えでスマホ表示時のスライドタイトルとテキストの大きさを変更することが出来ました。またVK Blocks のスライダーブロックもスライダーを非表示にしたうえで試してみたいと思います。この度はありがとうございました。

[対馬 俊彦]

Lightning G3 のトップページのスライドショーのフォントサイズの CSS は以下のようになっています。

/* スライドタイトル */
.ltg-slide .ltg-slide-text-title {
    font-size: clamp(16px,3dvw,32px);
}

/* スライドテキスト */
.ltg-slide .ltg-slide-text-caption {
    font-size: clamp(12px,2dvw,18px);
}

とりあえず、
スライドタイトルの 16px
スライドテキストの 12px
の部分を書き換えればスマホ表示に反映されます。

お時間があれば、VK Blocks のスライダーブロックを使ってみるといいと思います。

https://www.vektor-inc.co.jp/service/wordpress-plugins/vk-blocks/vk-blocks-blocks/block-slider/

ちょっとだけ手間は増えますが、
Lightning 標準のスライドショーよりもできることがはるかに多いし、柔軟な設定が可能です。

[With]

VK Patternsの「背景画像がズームインするスライダー」
正常に機能することを確認しました。

誠にありがとうございます。

[With]

■ WordPress のバージョン
6.6.2

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

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。

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

■ テーマのバージョン
15.26.3

■ Pro Unit のバージョン
9.99.4.1

■ スキンの種類
Origin III

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

■ プラグインの種類・バージョン
先ほど確認したところ
VK Patternsの「背景画像がズームインするスライダー」

背景画像がズームインするスライダー

を設置した全てのページで動きが止まっていました。

パターンを多用しております。
設置済の全てのページも動きが止まっております。
試しに新しく設置しても動きが止まっております。
検証をお願いします。

VK Blocks Proだったと思いますが
アップデートしてからおかしくなったようです。

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

■ 期待する動作
VK Patternsの「背景画像がズームインするスライダー」の動きを正常にしてほしい。

■ 自分で試した事
VK Patternsの「背景画像がズームインするスライダー」

背景画像がズームインするスライダー

試しに新しく設置しても動きが止まっております。

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

■ 実際の症状
先ほど確認したところ
VK Patternsの「背景画像がズームインするスライダー」

背景画像がズームインするスライダー

動きが止まっていました。

パターンを多用しております。
設置済の全てのページも動きが止まっております。
試しに新しく設置しても止まっております。
検証をお願いします。

VK Blocks Proだったと思いますが
アップデートしてからおかしくなったようです。

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

[川井昌彦]

対馬さん
ありがとうございます。
ライブラリの仕様なのですね。

スライダーは、納品後はお客様が更新するので、同じものを繰り返して登録するというのは厳しいのです。
お客様に、最低4枚必要という仕様に変更する話をして、追加の材料を用意していただくようにお願いしてみます。

[川井昌彦]

■ WordPress のバージョン
6.6.1

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

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。

■ テーマの種類
X-T9

■ テーマのバージョン
1.26.3

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

■ プラグインの種類・バージョン
VK Blocks 1.83.0.1

■ 期待する動作
スライダーブロックで下記のように設定しました。
・スライド設定
　エフェクト：スライド
　繰り返し：オン
　自動再生：オン

・スライダーアイテム：３つ
・アイテムの複数表示設定：1.5
・一度に遷移するスライドアイテムの数：1つずつ
・アクティブスライドを中央にする：オン

3枚の画像をカルーセルで繰り返し表示したいです。

■ 自分で試した事
スライダーアイテムの4つ目を追加すると、問題なく表示されます。（下のスライダー）

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

■ 実際の症状
2周目になると見切れている右側の画像（次の画像）が表示されません。（上のスライダー）

[うなこ]

お世話になっております、該当サイトを確認いたしました。

d-none d-md-blockのクラス名をつけているので、「お問い合わせはこちら」のテキスト部分だけが非表示になっている状態です。リンクの<a>タグに枠線の装飾用のcssがかかっているので、枠だけ見えている状態です。

ですので、<a>タグから非表示にする場合は以下のCSSでいかがでしょうか。

/*Lightning トップページスライダー内のボタンを575.98px以下で非表示*/
@media (max-width: 575.98px){
.lightning_swiper .btn.btn-ghost{
display:none;
}
}

参考にしていただいた記事はスライダーのページネーションを非表示にする方法ですので、クラス名が違っています。

クラス名の調べ方は、Google Chromeブラウザの場合は ［検証］でデベロッパーツールが開きますので、そこから調べることができます。（添付画像参照）

ちょっとしたcssの調整などはこちらの記事がわかりやすいですので、ぜひ参考にしてください。

できる！CSSカスタマイズ

Attachments:

You must be logged in to view attached files.

[474336]

早速のご連絡ありがとうございます。
今二つのブロックが同じ症状なんですが、一つはスライダーを利用しております。
→この場合、違う方法で今変更しよと思ってますが、スライダーを利用している限り編集が不可能でしょうか？

もう一つは親ページにそこから誘導したいボタンを設置してるのですが、こちらはグリッドカラムを利用して、ボタンを配置している状態の再利用ブロックがずっと固まってしまう状態になっています。