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

[対馬 俊彦]

ご質問に関連するトピックです。

スライダー サムネイル 連動できますか？

一昨年のトピックですが、現時点でも状況は変わっていません。

さまざまなブロックを自由に組み合わせてスライド内に配置できるのが VK Blocks のスライダーの大きな特長なので、「スライダーの画像を下に一覧表示」という仕様とは相性が悪く、そのような機能の実現は難しいだろうと思います。

ということで、現状では以下のどちらかでやることになります。

* Swiper API を使って独自にコーディングする

* やりたいことができるスライダープラグインを探す

[s h]

■ WordPress のバージョン
6.4.3

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

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

■ テーマのバージョン
15.20.2

■ Pro Unit のバージョン
0.26.5

■ スキンの種類
Evergreen

■ スキンのバージョン
0.2.5

■ 期待する動作
スライダーで表示する画像を一覧で表示しておく方法はありますか？
スライドしないとすべての画像が見られず、方法を探しております。

参考サイト

商品詳細

■ 自分で試した事
パターンライブラリなどを探しましたが、見つかりませんでした。

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

■ 実際の症状
表示する方法はありますでしょうか。

[うなこ]

VK パターンライブラリのご利用ありがとうございます！

スライダー_中心にフォーカスページの一番下に、【スライダーアイテムの中心が全表示 下揃え(CSSとしては中心以外が上余白で下部分が見切れている)】のパターンを追加しましたので、ここからコピーしてご利用ください。

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

[kami]

■ WordPress のバージョン
6.4.3

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

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

■ テーマのバージョン
15.20.1

■ Pro Unit のバージョン
8.18.0

■ スキンの種類
プレーン

■ 期待する動作
こちらのパターンhttps://patterns.vektor-inc.co.jp/vk-patterns/slider-center-effect/
一番下にある「スライダーアイテムの中心が拡大」のスライダーについて質問です。
真ん中にアイテムを揃えるのではなくすべてのアイテムを下に揃えたいと考えています。
例としてこのサイトにあるようなスライダーを作成したいと思っています。

トップページ

またスライダーのSpace betweenをすべて同じにしたいです。prevとnext以外のSpace betweenのサイズが違くなってしまいます。
スクリーンショットを添付しました。

■ 自分で試した事
カスタムCSSを試してみましたがうまくいきませんでした。

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

■ 実際の症状
特になし

Attachments:

You must be logged in to view attached files.

[suisei98]

うなこ様
お世話になっています。お早いご返信ありがとうございます。
スライダーの設定画面に【高さ】>「デバイス毎の高さ」の設定項目を調整したところ表示が期待通りにできそうです。

それと、Edge(開発社ツール)又はCrhome(検証)でプレビューした際の、モバイルでの表示のサイズ(縦×横)をおおよそどれくらいの数値にすると良いのでしょうか？

Attachments:

You must be logged in to view attached files.

[うなこ]

おそらくですが、スライダーの設定画面に【高さ】>「デバイス毎の高さ」の設定項目があるのですが、そちらに数字がはいっていませんか？ もし入っていましたらリセットすると高さが削除されますので、スライダーアイテム内に入れたブロックの高さが出ると思います。（添付画像参照）

いかがでしょうか？

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

h1 をどこに指定するかによりますが、ロゴの部分を h1 にしたいのであれば、Lightning Block Template Parts のヘッダーのパーツを編集します。

■ 他のページ用
* Dynamic If Block でページタイプを 「フロントページ（is_front_page）」 に指定し「除外指定」にする
* 既存のロゴ画像を Dynamic If Block の中に入れる

■ トップページ用
* 管理画面 > メディア に登録してあるロゴ画像に代替テキストが適切に設定してあるか確認
* 別途Dynamic If Block を隣り合わせで配置
ページタイプを 「フロントページ（is_front_page）」でのみ表示する設定し、その中に h1 ブロックを配置
* h１ブロックの編集ツールバーの下向きアイコンで表示されるドロップダウンの中から インライン画像 をクリックしてロゴ画像を選択
* 画像をクリックして横のサイズをピクセルで指定
* h1ブロックのマージン / パディングを 0 に指定（添付リンク参照）
* h1ブロックのカスタムCSSに selector img { display:block } を入力

と私の方で試してみて、まぁできない事はないですが手順が多すぎるので、ちょっと実用的ではないかなと思っています。

ヘッダーのロゴ要素以外で、例えばヘッダー下にスライダー（またはスライドしないヒーロー画像）があって、その中にサイト名などを表示しているようであれば、それに対して h1 を指定した方が楽かなと思いますがいかがでしょうか？

一応ヘッダーに設定する場合の参考画像などは添付します。

ブロックスタイルはここから設定できる -WordPressのブロックエディター

Attachments:

You must be logged in to view attached files.

[橋本滋]

■ WordPress のバージョン
6.4.3

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

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

■ テーマのバージョン
8.19.0

■ Pro Unit のバージョン
9.94.1.1

■ スキンの種類
Origin III

■ プラグインの種類・バージョン
VK All in One Expansion Unit　9.94.1.1

■ 期待する動作
無効化する前の状態に戻したい。

■ 自分で試した事
ありません。

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

■ 実際の症状
VK All in One Expansion Unitを一旦無効化し、再度有効化したところ、スライダーや全体的なデザインが崩れてしまいました。

サーバーで自動バックアップを取っていますが、他に元のデザインに戻す方法がありましたらご教示いただければ幸いです。

[s h]

■ WordPress のバージョン
6.4.3

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

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

■ テーマのバージョン
15.19.0

■ Pro Unit のバージョン
0.26.4

■ スキンの種類
Evergreen

■ スキンのバージョン
0.2.4

■ 期待する動作
画像のカラムデザインは、どのようにすれば実装可能でしょうか？

■ 自分で試した事
①パターンライブラリを参考に試しました。

・メディアとテキスト オフセット背景 左右余白25%　
2つの重なり位置の設定ができませんでした。
outer内に設置されているコントロールの余白を小さくすることができませんでした。

・社内制度_カラム_スライダー
背景のグラデーションで行うと、左側の角丸が設定できませんでした。

②制作実例で似ているカラムレイアウトを探しましたが、ありませんでした。

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

■ 実際の症状
上側の重なり部分を増やすことができません。
2カラム共、角丸にしたいです。

[VWSカスタマー]

■ WordPress のバージョン
WordPress 6.4.2

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

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

■ テーマのバージョン
Lightningバージョン: 15.18.0

■ Pro Unit のバージョン
Lightning G3 Pro Unit　バージョン 0.26.4

■ スキンの種類
Origin III

■ 期待する動作
トップのスライドショーを表示したい

■ 自分で試した事
Lightning pro をLightning G3 Pro Unitへ変更したが、外観>カスタマイズ>トップスライドショーを設定しても表示されません

■ 症状が発生するブラウザ
Chrome,エッジ

■ 実際の症状
Lightning pro をLightning G3 Pro Unitへ変更したが、外観>カスタマイズ>トップスライドショーを設定しても表示されません

[石川＠Vektor,Inc.]

公開画面側ではもとがどういう設定なのかわからず検証が難しいので該当スライダーを別の投稿に貼り付けて、コードビューに切り替えて、そのコードを貼り付けるか、テキストファイルに貼り付けて添付してください。

[With]

確認しましたが
「スライダーアイテムエリア内の余白を無くす」を選んでおります。

今一度、お伝えさせて頂きます。
以前は問題なく表示されていたページが
両脇が切れている状態になっております。
こちらでは何も行っておりませんので
アップデートによる原因と思われます。

スライダーアイテム、カバー
の組み合わせで利用しているかたで
同様の現象がある方はおりますでしょうか。
検証をお願いします。

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

[With]

お世話になります。
「検証のため症状が発生するスライダーのコードを貼る」
とはどういう意味ででしょうか。
どうすれば良いのか意味が分かりません。
申し訳ございません。
どうぞ宜しくお願いします。

[石川＠Vektor,Inc.]

スライダーアイテムの設定でエリア内の余白を無くす設定にしてみてください。

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

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

検証のため症状が発生するスライダーのコードを貼っていただけますでしょうか？
よろしくお願いいたします。