スライダーブロックの設定・カスタマイズについて

こんにちは、いつもお世話になっております。 今日はスライダーブロックの設定について相談させてください。 現在制作しているコーポレートサイトで、トップページは ① メッセージ → ②ロゴ →③動画 と、切り替わって表示されるファーストビューにすることになり、 Nishiki Proの「スライダーブロック」を使って実装しようと考えています。 質問1 ①→②→③と自動的に切り替わった後は、ずっと③のままの表示にしたいです。 スライダーブロックの設定で「スライドをループ」をOFFにして「オートプレイ」の「有効にする」をONにすればいいのかな?と思ったのですが(2点、設定画面の画像添付します)オートプレイを有効にすると、③のあと①に戻るようになってしまいました。 オートプレイにしつつ、①に戻さない(ループしない)設定は可能でしょうか? 質問2 各スライドの切り替えエフェクトを「フェード」にしようと思っています。 すると、切り替え時に画面が白っぽくなるように見えました。 デザインでは背景が黒なので、光っているような感じになってしまったんです。 フェードのエフェクトを黒に変えることはできますか? 質問は以上です。 環境: WordPress 6.4.3 Nishiki Proバージョン: 1.0.369 サーバー:エックスサーバー スタンダード プラグイン:今何も入っていません もし実際の画面の確認が必要な場合は、個別にURL送らせていただきます。 ご無理を言って申し訳ありません、ご教示よろしくお願いいたします。
No description
No description
7 Replies
imamura
imamura9mo ago
Nishiki Pro には Swiper 6.4.12 が同梱されているのですが、基本的には Swiper でできることならテーマ側でもできます。 質問1) Swiper の stopOnLastSlide というパラーメーターを含めると最後のスライドで止められるらしいです(未検証) ↑で止められるなら、テーマ側に機能を追加しますね。ただし、検証と機能追加の作業の時間確保のため、すぐに対応できる確約はできないことをご了承いただければと思います。 質問2) 以下のURLに書いてあるようなことがしたい、ということでしょうか。 https://teratail.com/questions/315750
teratail[テラテイル]
swiper.jsのフェード動作の件で
swiper.jsのフェードの動作において、画像切替時に、一旦ブラックアウトするようにする事はオプション設定で 出来ますでしょうか? 動作的には、 http://zengenji.jp/
MEE6
MEE69mo ago
@imamura(開発者)WordCamp 関西スポンサー参加 は レベルが 19 に あがった!
akko-o
akko-o9mo ago
おおー、解決策のご提示ありがとうございます!
以下のURLに書いてあるようなことがしたい、ということでしょうか。
はい、まさにおっしゃる通りです。 ご紹介いただいた記事の通りやってみます、ありがとうございます! やってみました! 質問1)の方ですが、コードの書き方がまずいのかもしれませんが、ブロックでの設定が優先されてしまうような印象でうまく設定できませんでした。 Nishiki Proの一般設定→スクリプト追加にカスタムしたいところ追記すれば良いかと思っていたのですが、こちらが優先されると言う認識は正しかったでしょうか? 質問2)の方は、お恥ずかしながらリンク先読んで気づきました。背景を黒にすれば良かっただけの話でした……確認不足でお手を煩わせ申し訳ありませんでした。フォローありがとうございます! 質問1)の方もうちょっとがんばってみます!
imamura
imamura9mo ago
質問1)の方ですが、コードの書き方がまずいのかもしれませんが、ブロックでの設定が優先されてしまうような印象でうまく設定できませんでした。 Nishiki Proの一般設定→スクリプト追加にカスタムしたいところ追記すれば良いかと思っていたのですが、こちらが優先されると言う認識は正しかったでしょうか?
Nishiki Pro に同梱されている front-end.js よりも後ろにスクリプトを読み込めば上書きされると思います。今開発環境で添付画像のようにブロック側で新しい設定項目を作成中なので、これができれば上書きの必要はなくなります。
No description
akko-o
akko-o9mo ago
ありがとうございます!
TKHR a.k.a たったか
これ、いつかやりたかったので嬉しいです!
imamura
imamura9mo ago
最新版で機能追加しているので、試してみてくださいー。
Want results from more Discord servers?
Add your server