[ 解決済 ] VKスライダーのフェード効果適用時に､透過画像を利用すると重なってしまう

[wkwk]

■ 期待する動作
VK Blocksのスライダーブロックを利用、エフェクト”フェード”適用時に
透明度を持つ画像を設定して、重なることなくフェードにて表示する。

■ 自分で試した事
１．2個のスライダーアイテムにそれぞれ背景透過画像(png)を、背景に設定して動作確認
⇒2枚の画像が重なって表示

２．2個のスライダーアイテムに透明度を持たない画像(jpg等）を背景に設定して動作確認
⇒期待する動作

３．2個のスライダーアイテムにボタンブロック１つを追加して、それぞれの配置を変えて動作確認
⇒常に2個のボタンが見える状態（ホバー、クリック可否等の確認は忘れました…。）

４．2個のスライダーアイテムにカバーブロックを置いて透過画像を設定、スライダーアイテムの
背景を白、透過設定を1に設定して動作確認
⇒期待する動作

■ その他特記事項
いつも大変お世話になっております。

既存静的サイトをトレースする形のWordpress化という案件を行っている中で、
標記の症状を確認しました。

フォーラム等調べたつもりですが既知の問題であったら、大変恐縮です。
Slackも確認しながら、スライダーブロックでは”swiper.js”を利用していると
お見受けしたのですが、それを基にググってみたところ、当該ライブラリの特性
なのかなという認識です。
（Googleにてクエリ”swiper フェード 透過画像”にて検索）

解決策も複数ネットに上げて頂けている中で、当方のjavascriptやプラグイン周りの
編集という知見が全く無いに等しいため、適用できていない状況です。

スライダーブロックをごちゃごちゃ触って期待する動作も実現できている中で
恐縮ではございますが、本件、Vk Blocks等の改修にてご対応頂けたりしますでしょうか。

該当URLには、自分で試したことの中の１項の症状のままのページを
一時的に公開しております。

以上、何卒よろしくお願いいたします。

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[wkwk]

上記の件、五月雨式となり大変恐縮ではございますが、
当初は下記、環境にて事象を確認しました。

Wordpress 6.1.1

テーマ
Lightning バージョン　15.8.0

プラグイン
VK Blocks　バージョン1.53.0.1
(VK Blocks Pro バージョン 1.53.0.0を有効化）
Lightning G3 Pro Unit バージョン 0.24.0

以上、よろしくお願いいたします。

[石川＠Vektor,Inc.]

う…うーん…よく状況が理解できていないのですが、
透過させるために透過pngを使って重なる事なくフェードというのがちょっとわからないのですが、

透過png → 透過する
フェード → 透過する

のでそれは物理的に無理なのかなという印象がしますが…

まずスライドに指定する画像が透過しなくてはいけない理由は何でしょうか？
特になければ１枚のスライダーの中に透過しない背景を置いた上で透過pngを置けば良いのではないかなと思いました。

[wkwk]

石川様

いつも大変お世話になっております。
返答遅くなり、また、説明下手で申し訳ございません…。

お客様の既存サイトの作りとして、ページの背景画像が設定されており、
その上に被せてスライドショーを配置、背景画像の表示を担保するために
スライドに透過画像を指定している状況で必要となりました。

現象について、該当URLの挙動を見ていても、未だに理解が及んでいないのですが、
2枚の背景透過画像を設定してしまったときに、その2枚が干渉しあってしまうのが問題かな..と思っています。
# 透過画像を設定することが問題という部分に想像以上にハマってしまったので、
　報告がメインになっていたので、機能追加要望にしたのが微妙だったのかな..と今更思いました。

swiper.jsのfadeは、2枚の画像を置いたときに、瞬時的に見た時の表と裏の画像を
opacityで切り替えしているのかなと推測しているんですが、デフォルトでは透過画像を想定していないので
裏側の画像のopacityは0まで落とす必要も無く、0まで落としていないんだろう…と思っています。
そこで、swiper.jsのfadeEffectにはcrossFade なるオプションがあってフラグを立てることで
透過画像設定時の対処はできるみたいなのですが、ブラウザの開発者ツール及びJavascriptの理解が乏しく、
個人で解決できず申し訳ありません..。

ご提示いただいた通り、背景画像も含めた不透明画像にて処置いたしました。
ご対応頂き、ありがとうございます。

[対馬 俊彦]

crossFade を使いたいのであれば、
VK スライダーは使えない（独自に JavaScript でコーディングが必要）
と思います。

そこまでしなくても、
以下の CSS で wkwk さんがやりたいことができる気がします。(たぶん)

.vk_slider_item {
    opacity: 0 !important;
}
.vk_slider_item.swiper-slide-active {
    opacity: 1 !important;
}

お時間があれば試してみてください。

• この返信は1年、 8ヶ月前に対馬 俊彦が編集しました。

[wkwk]

対馬様

いつも大変お世話になっております。
ご提示いただいた内容でカスタムCSS適用したところ、期待する動作が確認できました。
本当にありがとうございます。

ひとえに、当方の開発者ツールの使いこなしのスキル不足が原因と考えます。
お手数をおかけし、申し訳ありませんでした。

[投稿者]

投稿