ありがとうございます。
ご教授いただいた内容で再インストールしました。
スライダーのカスタムCSSにselector .swiper-wrapper {transition-timing-function: linear;}を記述しましたが、スピードは変更されないようでした。
またスライド設定も見当たりません。
■ WordPress のバージョン
WordPress 6.2.1
■ テーマ・プラグインは全て最新版で確認してください。
確認しました。
■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit
■ テーマのバージョン
Lightningバージョン: 15.8.0
■ Pro Unit のバージョン
バージョン 0.2.4.1
■ スキンの種類
Origin III
■ 期待する動作
スライダーを一定のスピードに設定したい。
■ 自分で試した事
CSSを追加しました
■ 症状が発生するブラウザ
Chrome
■ 実際の症状
不規則な動きをしています。
■ その他特記事項
設定のヒント
「スライド設定」>表示時間は0 にします。
「複数の表示設定」>1度に表示する画像の枚数は3(お好みで変更可)、1度の動作で動かす枚数は1にします。
スライダーのカスタムCSSにselector .swiper-wrapper {transition-timing-function: linear;} を入力すると、一定の割合で変化していきます。
※このブロックは必要に応じて削除してください。
とありますが、それぞれの設定がどの場所にあるのかわからないです。
スライダーブロックの中にカバーブロックを配置してカバーブロックの背景に動画を指定してください。
※動画の開始タイミングは制御できません。
■ WordPress のバージョン
WordPress 6.2
■ テーマ・プラグインは全て最新版で確認してください。
確認しました。
■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit
■ テーマのバージョン
Lightning G3 Evergreen
■ Pro Unit のバージョン
VK All in One Expansion Unit
■ スキンの種類
Evergreen
■ スキンのバージョン
バージョン 0.2.2
■ 期待する動作
スライダーの1枚を動画にしたいです。
(例) 画像 + 画像 + 動画
■ 自分で試した事
外観 → カスタマイズ → Lightning トップページスライドショー
固定ページ → VKブロックレイアウト → スライダー
上記二つで試してみましたが動画(mp4)は入りませんでした。
■ 症状が発生するブラウザ
Chrome
■ 実際の症状
動画が設置できない
■ WordPress のバージョン
6.2
■ テーマ・プラグインは全て最新版で確認してください。
確認しました。
■ テーマの種類
Lightning Pro
■ テーマのバージョン
8.17.10
■ スキンの種類
Origin II
■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。
■ プラグインの種類・バージョン
Lightning Pro をつかっているのですが、トップページのファーストビューで Smart Slider をつかうのであれば、テーマエディターのどこに書き込みすればいいのか教えてもらえれば助かります。
■ 期待する動作
トップページのファーストビューで Smart Slider 使いたい
■ 自分で試した事
[カスタマイズ]→[ウィジェット]→[トップページコンテンツエリア上部]からショートコードブロックということをおっしゃってくださってるのだと思うのですが、そうすると両横に余白ができてファーストビューが画面いっぱいにはできません。
その他のやり方があればおしえていただきたいです。
■ 症状が発生するブラウザ
Chrome
■ 実際の症状
左右余白ができる
ご連絡ありがとうございます。
有料の3D カルーセルスライダー
Sample 3D Flow Carousel
こちらを利用したいため、四苦八苦していますが
解決できません。
よろしくお願いいたします。
■ WordPress のバージョン
6.2
■ テーマ・プラグインは全て最新版で確認してください。
確認しました。
■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit
■ テーマのバージョン
15.8.0
■ Pro Unit のバージョン
0.24.0
■ スキンの種類
Evergreen
■ スキンのバージョン
0.2.1
■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。
■ プラグインの種類・バージョン
Master Slider – Responsive Touch Slider
バージョン: 3.8.7
■ 期待する動作
Master Sliderを固定ページにショートコードで貼り付けて表示をさせたい。
■ 自分で試した事
・プラグインを全て削除をしてMaster Sliderのみにしたが稼働しない
・カスタマイズ管理画面ではスライダーが表示されるが公開ページで表示されない
・他のテーマに変更をしたら、表示されるテーマと表示れないテーマがあった
■ 症状が発生するブラウザ
Safari、Chrome、Edge、スマホ
■ 実際の症状
Master Sliderをショートコードで貼り付けたが表示されません。
固定ページ、投稿ページ、どちらも表示されません。
カスタマイズのプレビューは表示されています。
プラグインに設置画面のプレビューでは表示されています。
crossFade を使いたいのであれば、
VK スライダーは使えない(独自に JavaScript でコーディングが必要)
と思います。
そこまでしなくても、
以下の CSS で wkwk さんがやりたいことができる気がします。(たぶん)
.vk_slider_item {
opacity: 0 !important;
}
.vk_slider_item.swiper-slide-active {
opacity: 1 !important;
}
お時間があれば試してみてください。
う…うーん…よく状況が理解できていないのですが、
透過させるために透過pngを使って重なる事なくフェードというのがちょっとわからないのですが、
透過png → 透過する
フェード → 透過する
のでそれは物理的に無理なのかなという印象がしますが…
まずスライドに指定する画像が透過しなくてはいけない理由は何でしょうか?
特になければ1枚のスライダーの中に透過しない背景を置いた上で透過pngを置けば良いのではないかなと思いました。
■ 期待する動作
VK Blocksのスライダーブロックを利用、エフェクト”フェード”適用時に
透明度を持つ画像を設定して、重なることなくフェードにて表示する。
■ 自分で試した事
1.2個のスライダーアイテムにそれぞれ背景透過画像(png)を、背景に設定して動作確認
⇒2枚の画像が重なって表示
2.2個のスライダーアイテムに透明度を持たない画像(jpg等)を背景に設定して動作確認
⇒期待する動作
3.2個のスライダーアイテムにボタンブロック1つを追加して、それぞれの配置を変えて動作確認
⇒常に2個のボタンが見える状態(ホバー、クリック可否等の確認は忘れました…。)
4.2個のスライダーアイテムにカバーブロックを置いて透過画像を設定、スライダーアイテムの
背景を白、透過設定を1に設定して動作確認
⇒期待する動作
■ その他特記事項
いつも大変お世話になっております。
既存静的サイトをトレースする形のWordpress化という案件を行っている中で、
標記の症状を確認しました。
フォーラム等調べたつもりですが既知の問題であったら、大変恐縮です。
Slackも確認しながら、スライダーブロックでは”swiper.js”を利用していると
お見受けしたのですが、それを基にググってみたところ、当該ライブラリの特性
なのかなという認識です。
(Googleにてクエリ”swiper フェード 透過画像”にて検索)
解決策も複数ネットに上げて頂けている中で、当方のjavascriptやプラグイン周りの
編集という知見が全く無いに等しいため、適用できていない状況です。
スライダーブロックをごちゃごちゃ触って期待する動作も実現できている中で
恐縮ではございますが、本件、Vk Blocks等の改修にてご対応頂けたりしますでしょうか。
該当URLには、自分で試したことの中の1項の症状のままのページを
一時的に公開しております。
以上、何卒よろしくお願いいたします。
横から失礼します。
DRILL LANCER さんの回答通りなのですが、ちょっと補足させていただきます。
JavaScript を書かずにスライドショーを動かす TIPS を紹介します。
1行目の
<div class="swiper">
を
<div class="lightning_swiper-container swiper-container">
と書き換えれば、トップページのスライドショーと同じ設定で動作します。
エンドユーザーにこの操作を任せたら、レイアウト崩れが頻回に起こり…
ロックをかけておけば、そのリスクが軽減されると思います。
画面幅に応じたサイズの画像を WordPress が自動生成してくれるということもスライダーブロック(画像ブロック)で作るメリットです。
多分 Swiper に対して指示を送る Javascript が存在しない or 読み込まれていないのが原因です。
例:
const swiper = new Swiper('.swiper', {
speed: 400,
spaceBetween: 100,
});
現状の仕様で実現したいのなら下記を参考に指示用の Javascript をつくって swiper の後で読み込ませる必要があります。
https://swiperjs.com/swiper-api
P.S.
掲載されたコードの例だとスライダーアイテムブロックの中に画像ブロックを設置して画像ブロックのツールバーからリンクを設定すればほぼ同等なことができると思います。
石川様
ご回答ありがとうございます。
最終的には
プラグイン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>