「スライダー」の検索結果
-
検索結果
-
返信が含まれるトピック: VKスライダーのフェード効果適用時に､透過画像を利用すると重なってしまう
crossFade を使いたいのであれば、
VK スライダーは使えない（独自に JavaScript でコーディングが必要）
と思います。そこまでしなくても、
以下の CSS で wkwk さんがやりたいことができる気がします。(たぶん).vk_slider_item { opacity: 0 !important; } .vk_slider_item.swiper-slide-active { opacity: 1 !important; }お時間があれば試してみてください。
返信が含まれるトピック: VKスライダーのフェード効果適用時に､透過画像を利用すると重なってしまう
う…うーん…よく状況が理解できていないのですが、
透過させるために透過pngを使って重なる事なくフェードというのがちょっとわからないのですが、透過png → 透過する
フェード → 透過するのでそれは物理的に無理なのかなという印象がしますが…
まずスライドに指定する画像が透過しなくてはいけない理由は何でしょうか？
特になければ１枚のスライダーの中に透過しない背景を置いた上で透過pngを置けば良いのではないかなと思いました。■ 期待する動作
VK Blocksのスライダーブロックを利用、エフェクト”フェード”適用時に
透明度を持つ画像を設定して、重なることなくフェードにて表示する。■ 自分で試した事
１．2個のスライダーアイテムにそれぞれ背景透過画像(png)を、背景に設定して動作確認
⇒2枚の画像が重なって表示２．2個のスライダーアイテムに透明度を持たない画像(jpg等）を背景に設定して動作確認
⇒期待する動作３．2個のスライダーアイテムにボタンブロック１つを追加して、それぞれの配置を変えて動作確認
⇒常に2個のボタンが見える状態（ホバー、クリック可否等の確認は忘れました…。）４．2個のスライダーアイテムにカバーブロックを置いて透過画像を設定、スライダーアイテムの
背景を白、透過設定を1に設定して動作確認
⇒期待する動作■ その他特記事項
いつも大変お世話になっております。既存静的サイトをトレースする形のWordpress化という案件を行っている中で、
標記の症状を確認しました。フォーラム等調べたつもりですが既知の問題であったら、大変恐縮です。
Slackも確認しながら、スライダーブロックでは”swiper.js”を利用していると
お見受けしたのですが、それを基にググってみたところ、当該ライブラリの特性
なのかなという認識です。
（Googleにてクエリ”swiper フェード 透過画像”にて検索）解決策も複数ネットに上げて頂けている中で、当方のjavascriptやプラグイン周りの
編集という知見が全く無いに等しいため、適用できていない状況です。スライダーブロックをごちゃごちゃ触って期待する動作も実現できている中で
恐縮ではございますが、本件、Vk Blocks等の改修にてご対応頂けたりしますでしょうか。該当URLには、自分で試したことの中の１項の症状のままのページを
一時的に公開しております。以上、何卒よろしくお願いいたします。
返信が含まれるトピック: 固定ページ内で、SWIPERを使用したい
横から失礼します。
DRILL LANCER さんの回答通りなのですが、ちょっと補足させていただきます。
JavaScript を書かずにスライドショーを動かす TIPS を紹介します。
1行目の
<div class="swiper">を
<div class="lightning_swiper-container swiper-container">と書き換えれば、トップページのスライドショーと同じ設定で動作します。
エンドユーザーにこの操作を任せたら、レイアウト崩れが頻回に起こり…
ロックをかけておけば、そのリスクが軽減されると思います。
画面幅に応じたサイズの画像を WordPress が自動生成してくれるということもスライダーブロック（画像ブロック）で作るメリットです。
返信が含まれるトピック: 固定ページ内で、SWIPERを使用したい
多分 Swiper に対して指示を送る Javascript が存在しない or 読み込まれていないのが原因です。
例：
const swiper = new Swiper('.swiper', { speed: 400, spaceBetween: 100, });現状の仕様で実現したいのなら下記を参考に指示用の Javascript をつくって swiper の後で読み込ませる必要があります。
https://swiperjs.com/swiper-apiP.S.
掲載されたコードの例だとスライダーアイテムブロックの中に画像ブロックを設置して画像ブロックのツールバーからリンクを設定すればほぼ同等なことができると思います。返信が含まれるトピック: 固定ページ内で、SWIPERを使用したい
石川様
ご回答ありがとうございます。最終的には
プラグインACFを組んで
任意の画像をメディアから選択したものを読ませたいのです。
最低限必要な操作ができる程度のユーザーさんでも
メニューから画像を選択するだけでスライダーに組めるようにしたいのです。VK Blocks はわかっている人からしたらとても使い勝手の良いツールですが、エンドユーザーにこの操作を任せたら、レイアウト崩れが頻回に起こり、その都度修正してあげなくてはなりません。
エンドユーザーには最低限出来る事だけを公開しておきたいのです。
最終的には下記のようなコードでACFで設定した画像を呼び出したいと考えています。
<div class="swiper"> <div class="swiper-wrapper"> <?php if( have_rows('banner_top', 'option') ): ?> <?php while( have_rows('banner_top', 'option') ): the_row(); // vars $image = get_sub_field('banner_top_img', 'option'); $link = get_sub_field('banner_top_url', 'option'); ?> <div class="swiper-slide> <?php if( $link ): ?> <a href="<?php echo $link; ?>"> <?php endif; ?> <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" /> <?php if( $link ): ?> </a> <?php endif; ?> </div> <?php endwhile; ?> <?php endif; ?> </div> </div>返信が含まれるトピック: 固定ページ内で、SWIPERを使用したい
ブロックエディタやテーマの幅処理に応じてチューニングしてるので、スライダーブロックを配置して見比べるのが一番早いと思います。
ちなみに VK Blocks のスライダーブロックではダメな理由は何でしょうか？
■ 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■ 実際の症状
動かない返信が含まれるトピック: EVERGREEN ピックアップ導入事例スライダーのタブレット表示について
こんばんは。
返信が遅くなりました。スライダーは別でも作っていただいたのですね。
助かります。今、確認してみました。
行数が違うものも試しましたが、バッチリでした！
早急に対応していただきありがとうございました。
今後ともよろしくお願い致します。■ 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■ 実際の症状
画像添付しました■ その他特記事項
お世話になります。
よろしくお願い致します。返信が含まれるトピック: トップページ スライドショーの上に画像を置きたい
スライダーアイテムにOuterを重ねてみたが、スライドショーが全幅にならなかった(方法が分からない)ので、うまくいく方法があれば教えてほしい
Outerを入なくても、スライダーアイテムに背景画像を設置することができます
【スライド設定> エフェクトをフェードに設定する】
参考サイトのようにするなら、エフェクトをフェードにします。
スライダーを全幅で設置して、親のスライダーを選択して、右側のスライダーの設定画面から【スライド設定】> 「エフェクト」を「フェード」にします。【スライダー全幅でスライダーアイテムに背景画像を設置】
※添付画像参照
スライダーアイテムを選択しますと、右側のスライダーアイテムのブロック設定画面に【背景設定】が出てきます。背景画像（PC）、背景画像 ( タブレット )、背景画像 ( モバイル )が設置できますので、お好みで設置してください。
背景画像サイズは、「カバー」にすると、画像が見切れずに配置できます。【スライドアイテム内に画像を配置】
今回はPCとスマホで画像を出しわけしたいということですので
スライドアイテム内にPC用の画像とスマホ用の画像を配置します。ブロックごとに「非表示設定」機能がありますので、
PCサイズ用の画像は、非表示 ( 画面サイズ : sm ) 非表示 ( 画面サイズ : xs )」をオンにして、スマホサイズ用の画像は、非表示 ( 画面サイズ : xxl )、非表示 ( 画面サイズ : xl )、非表示 ( 画面サイズ : lg )、
非表示 ( 画面サイズ : md )をオンにすると、切り替えて表示できます。
※全部のスライダーアイテムに、同じ画像を配置する感じになります。フェードになっているので、後ろの背景だけが切り替わっているように見えると思いますがいかがでしょうかポイントは、まずはスライダーアイテムを1つ目を完成させて、2つ目からは複製してアイテムを増やすと背景画像を差し替えるだけなので作業が楽かもしれません。
▼▼▼参考ページ▼▼▼
■ 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■ 実際の症状
スライダーアイテムが全幅にならない石川様
ご教示いただいた方法で無事にトップページへスライダーを表示させることができました。
今後はこちらを使ってまいります。
ありがとうございました。うなこ様
お声がけいただきありがとうございました。
■ 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 にします。
の通りの操作ができなくなるので、不安に思ってしまう人がいるかもしれません。
トップページに指定した固定ページにパターンでスライドを貼り付けたらいかがでしょうか？
もし動くようでしたらそのままそのスライダーをカスタマイズして、
外観 > カスタマイズ > Lightning トップページスライドショー から トップのスライダーを非表示に設定するのも一つの手かと思います。※ 動かない原因が他のプラグインの設定などの影響をうけている可能性があり外からはわからないため。
