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

[webfactoryjp]

■ WordPress のバージョン
6.0

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

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

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

■ Pro Unit のバージョン
バージョン 0.17.1

■ スキンの種類
プレーン

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

■ 期待する動作
固定ページにおいて
vk blockやコンテンツスライダーを使用せず
任意の文字や画像を
swiperでスライド出力したいのですが
元々swiperが内包されているとのことで下記のようなコードを
カスタムHTMLで、固定ページに入れたのですが、
swiperが動いてくれません。

内包してあるswiperを動かすにはclass名に何か入れないといけないでしょうか。

■ 自分で試した事

<!-- スライダーのコンテナ -->
<div class="swiper">
<!-- 必要に応じたwrapper -->
<div class="swiper-wrapper">
<!-- スライド -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 必要に応じてページネーション -->
<div class="swiper-pagination"></div>
<!-- 必要に応じてナビボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

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

■ 実際の症状
動かない

[ruby24]

こんばんは。
返信が遅くなりました。

スライダーは別でも作っていただいたのですね。
助かります。

今、確認してみました。
行数が違うものも試しましたが、バッチリでした！
早急に対応していただきありがとうございました。
今後ともよろしくお願い致します。

[ruby24]

■ WordPress のバージョン
WordPress 6.1.1

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

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

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

■ Pro Unit のバージョン
バージョン 0.23.4

■ スキンの種類
Origin III

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

■ 期待する動作
EVERGREEN　ピックアップ導入事例のスライダー部分をお客様の声で使用したいのですが、タブレットで表示確認したところ、画像とお客様名が一部見える状態で、感想部分が見えない状態です。

この状態だと写真部分に感想を入れるしかない状態なので、なんとかならないでしょうか？

※タブレットのサイズは9.7型ワイドです。

■ 自分で試した事
制作中サイトとデモサイトで表示の比較　→　同じでした。

■ 症状が発生するブラウザ
バージョン: 110.0.5481.104

■ 実際の症状
画像添付しました

■ その他特記事項
お世話になります。
よろしくお願い致します。

Attachments:

You must be logged in to view attached files.

[うなこ]

スライダーアイテムにOuterを重ねてみたが、スライドショーが全幅にならなかった(方法が分からない)ので、うまくいく方法があれば教えてほしい

Outerを入なくても、スライダーアイテムに背景画像を設置することができます

【スライド設定> エフェクトをフェードに設定する】
参考サイトのようにするなら、エフェクトをフェードにします。
スライダーを全幅で設置して、親のスライダーを選択して、右側のスライダーの設定画面から【スライド設定】> 「エフェクト」を「フェード」にします。

【スライダー全幅でスライダーアイテムに背景画像を設置】
※添付画像参照
スライダーアイテムを選択しますと、右側のスライダーアイテムのブロック設定画面に【背景設定】が出てきます。背景画像（PC）、背景画像 ( タブレット )、背景画像 ( モバイル )が設置できますので、お好みで設置してください。
背景画像サイズは、「カバー」にすると、画像が見切れずに配置できます。

【スライドアイテム内に画像を配置】
今回はPCとスマホで画像を出しわけしたいということですので
スライドアイテム内にPC用の画像とスマホ用の画像を配置します。

ブロックごとに「非表示設定」機能がありますので、
PCサイズ用の画像は、非表示 ( 画面サイズ : sm )　非表示 ( 画面サイズ : xs )」をオンにして、スマホサイズ用の画像は、非表示 ( 画面サイズ : xxl )、非表示 ( 画面サイズ : xl )、非表示 ( 画面サイズ : lg )、
非表示 ( 画面サイズ : md )をオンにすると、切り替えて表示できます。
※全部のスライダーアイテムに、同じ画像を配置する感じになります。フェードになっているので、後ろの背景だけが切り替わっているように見えると思いますがいかがでしょうか

ポイントは、まずはスライダーアイテムを1つ目を完成させて、2つ目からは複製してアイテムを増やすと背景画像を差し替えるだけなので作業が楽かもしれません。

▼▼▼参考ページ▼▼▼

• 【無料プラグイン】VK Blocks スライダーブロックの使い方を徹底解説（基本編）
• VK Blocks スライダーブロックのパターン9選（実例編）
• VWSオンライン勉強会 #42 Lightningや他テーマでも使える無料スライダーブロック徹底解説

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

Attachments:

You must be logged in to view attached files.

[takesho]

■ WordPress のバージョン
6.1.1

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

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

■ テーマのバージョン
Lightning

■ Pro Unit のバージョン
0.23.4

■ スキンの種類
Evergreen

■ スキンのバージョン
0.2.1

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

■ 期待する動作
トップページスライドショーの上に画像を置いて、後ろの画像がスライドしても上に置いている画像はそのままになるようにしたい。

スマートフォンだとその画像の配置もうまく変わるようにしたい。

参考：
https://1mental-clinic.com/

■ 自分で試した事
スライダーアイテムにOuterを重ねてみたが、スライドショーが全幅にならなかった(方法が分からない)ので、うまくいく方法があれば教えてほしい

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

■ 実際の症状
スライダーアイテムが全幅にならない

[kg-mio]

石川様

ご教示いただいた方法で無事にトップページへスライダーを表示させることができました。
今後はこちらを使ってまいります。
ありがとうございました。

うなこ様

お声がけいただきありがとうございました。

[対馬 俊彦]

■ WordPress のバージョン
6.1.1

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

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

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

■ テーマのバージョン
15.5.1

■ Pro Unit のバージョン
0.23.4

■ スキンの種類
Origin III

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

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

■ 期待する動作
スライダーブロックの [スライド設定] → [表示時間] を 0 に設定できる。

■ 自分で試した事
試しに、1.49.0.0 に戻したら、0 に設定できました。

■ 症状が発生するブラウザ
Chrome / Firefox (Windows 11)

■ 実際の症状
VK Blocks を 1.50.0.1 にアップデートすると、
スライダーブロックの [スライド設定] → [表示時間] を
0 に設定できなくなります。

1 にすることはできますので、実用上はあまり問題ないのですが、
パターンライブラリの説明にある

「スライド設定」>表示時間は0 にします。

の通りの操作ができなくなるので、不安に思ってしまう人がいるかもしれません。

無限ループスライド_カスタムCSS有

[石川＠Vektor,Inc.]

トップページに指定した固定ページにパターンでスライドを貼り付けたらいかがでしょうか？

VWSオンライン勉強会 #042 「Lightningや他テーマでも使える無料スライダーブロック徹底解説」振り返り

もし動くようでしたらそのままそのスライダーをカスタマイズして、
外観 > カスタマイズ > Lightning トップページスライドショー から トップのスライダーを非表示に設定するのも一つの手かと思います。

※ 動かない原因が他のプラグインの設定などの影響をうけている可能性があり外からはわからないため。

[Godzilla33]

ご助言ありがとうございます。

＞VKパターンライブラリ からではなく、1からVk スライダーブロックを配置した場合もエラーがでる、ということでしょうか

配置している途中に「更新に失敗しました。 返答が正しい JSON レスポンスではありません。」が表示されます。

＞カスタム投稿タイプの設定で REST API は有効にしていますか？

この部分は気になっている部分で、有効にすると言う意味がわかりません

＞クラッシックエディターを停止した状態で新規投稿を作成して貼り付けても保存に失敗しますか？

無効化してみたけどだめでした。

まったく同じ条件でテストサイトを開いてみました。
固定ページ・投稿ページは、ブロックパターンを公開できますが、カスタム投稿ではエラーになります。
カスタム投稿タイプの設定がまずいのでしょうか。

テストサイト

ホーム

ユーザー名 : （削除済）
パスワード : （削除済）

よろしくお願いします。

• この返信は2年、 3ヶ月前に石川＠Vektor,Inc.が編集しました。

[うなこ]

すこしお聞きしても良いでしょうか？
VKパターンライブラリ からではなく、1からVk スライダーブロックを配置した場合もエラーがでる、ということでしょうか

—

もしほかの方で、同じような状況で「こうしたらエラーが解消された」などありましたら、お気軽にコメントください🙇‍♀️

[Godzilla33]

ご助言ありがとうございます。

＞スライダーブロックに「ブロックのリカバリーを試行」ボタンが出ていたりしますか？

スライダーブロックを配置して、スライダーアイテムを登録中に、画面上部に「更新に失敗しました。 返答が正しい JSON レスポンスではありません。」が表示されます。（たぶん下書き自動更新でエラーになっていると思います）

固定ページで作成したものをクラシックエディターで開き、ソースをカスタム投稿に張り付けると問題なく表示しますので、とりあえずこれで対応しています。

[うなこ]

いろんなブロックを置いて公開してみたら、スライダーブロックを置いたときエラーが出ます。

全然違う問題かもしれませんが、、

スライダーブロックに「ブロックのリカバリーを試行」ボタンが出ていたりしますか？
「ブロックのリカバリーを試行」ボタンがでているものは、全て「ブロックのリカバリーを試行」ボタンをクリックしてみてください。

そうするとエラーが消えた方が過去にいらっしゃったので、一度ご確認くださいmm

[Godzilla33]

早い返信ありがとうございます。

＞パーマリンクの設定をデフォルトに変更して保存したら、パターンが保存できるか確認してみてください

やってみましたが、同じエラーが表示され公開できませんでした。

いろんなブロックを置いて公開してみたら、スライダーブロックを置いたときエラーが出ます。
VKパターンライブラリーもスライダーパターンをペーストしていました。

投稿ページでは、問題なく使用できるのでこちらにカテゴリーを作り対応します。

[うなこ]

カスタマイズ > 追加CSS　に以下のCSSを追加すると非表示にできます。

そのほかの方法では、
VK Blocks Proのスライダーブロックを使用すれば、「スライド設定」>「ページネーションの種類」から非表示にできます。
スライダーブロックの方が柔軟なデザインか可能です。

スライダー

/*Lightningページネーションを非表示*/
.lightning_swiper-container .swiper-pagination{
display:none;
}

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

[対馬 俊彦]

VK Blocks のスライダーで枠外にはみ出したものが表示されないのは
以下の CSS が効いているからです。

.swiper-container {
    overflow: hidden;
}

hidden を visible にすれば表示されます。