Discordコミュニティを作りました! 参加する

フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
メインビジュアルの画像切り替わり時にカ...
 
通知
すべてクリア

[解決済] メインビジュアルの画像切り替わり時にカクつく

16 投稿
4 ユーザー
6 Likes
3,520 表示
ari.hana.maon
(@ari-hana-maon)
投稿: 10
メンバー
Topic starter
 

トップページ-メインビジュアル に表示する画像の切り替わり時にカクつきます

画像を2枚 用意

◇画像スライダー設定
スライドの切り替えアニメーション:フェード
スライドの表示中アニメーション:ズームイン
スライドの切り替わり速度:1500
スライドが切り替わる感覚:5000

2週目以降の画像1から2へ切り替わり時にカクッとなります
1→2→1(2へ切り替わる直前にカクつく)→2→1(2へ切り替わる直前にカクつく)→2→・・・

サンプル動画では2週目以降、毎回で線路からアザラシに変わる直前にカクッとなります

Edge,Chromeで確認しても同じ事象になります

なお、画像が3枚の時はカクつきません
→その後、1枚消して2枚に減らすと再発生しました

また、スライドの表示中アニメーション:左から右へ
の設定にしても、上記と同じカクっとなりました

ご確認をおねがいいたします

確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.6.0.1
利用中のWordPressバージョン
5.9.3
利用中のプラグイン一覧

Customizer Export/Import
Contact Form 7

 
投稿済 : 09/04/2022 8:21 pm
skillsharejp
(@skillsharejp)
投稿: 941
SWELL高速化顧問
 

検証サイトのAll-in-One WP MigrationのバックアップファイルをGoogleドライブ等経由して共有し、そのダウンロードリンクをこちらに張ってください。同じ状況で自分のエックスサーバーでもテストしたいです。

SWELLフォーラムはユーザーフォーラムのため、開発者以外の回答は全て任意です。当アカウントによる回答もボランティアのため、ヒントの提供に留まる場合があります。

ご依頼のご相談・お問い合わせ窓口
https://skillshare.biz/inquiry/

 
投稿済 : 10/04/2022 1:21 pm
ari.hana.maon
(@ari-hana-maon)
投稿: 10
メンバー
Topic starter
 

@skillsharejp 

All-in-One WP Migrationでバックアップを作成しました

...

This post was modified 2年前 by
 
投稿済 : 10/04/2022 4:06 pm
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

バックアップファイルをオープンな場所に置いておくとSWELLのファイルも誰でもダウンロードできてしまうのと、かつセキュリティ的にも危ないと思うので上記のコメント内の一部を削除させていただきました。

SWELL開発者です。

 
投稿済 : 10/04/2022 4:27 pm
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

ファイル自体は僕の方でダウンロードできましたので、どのような状態なのかこちらで確認してみます。

SWELL開発者です。

 
投稿済 : 10/04/2022 4:28 pm
ari.hana.maon
(@ari-hana-maon)
投稿: 10
メンバー
Topic starter
 

@loos_ryo

内容確認をよろしくお願いします 😀 

またコメント編集の件、了解しました。

slackの方で個別やりとりの方が良かったでしょうか?

 
投稿済 : 10/04/2022 6:45 pm
skillsharejp
(@skillsharejp)
投稿: 941
SWELL高速化顧問
 

@loos_ryo メインビジュアルの高さ設定を画像・動画サイズのままにすると正常に表示されました。ウィンドウサイズにフィットさせるだと問題が発生しています。

SWELLフォーラムはユーザーフォーラムのため、開発者以外の回答は全て任意です。当アカウントによる回答もボランティアのため、ヒントの提供に留まる場合があります。

ご依頼のご相談・お問い合わせ窓口
https://skillshare.biz/inquiry/

 
投稿済 : 10/04/2022 8:13 pm
ari.hana.maon
(@ari-hana-maon)
投稿: 10
メンバー
Topic starter
 

@loos_ryo
@skillsharejp

いつもバージョンアップありがとうございます 😀 
本件、v.2.6.1.4でも事象が発生しています
引き続き、ご確認よろしくお願いいたします

 
投稿済 : 26/04/2022 6:57 pm
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

色々調節を試みたのですが、(スライダー部分はswiper.jsで実装しているのですが)swiperの仕様的に2枚の時のカクツキを抑えることは難しそうでした。

「ズーム開始→次のスライドに移動してもズームを維持→リセット状態で待機」という状態を回さないといけないのですが、これが2枚だとリセットで待機することができなくなります。

swiperの仕様的に、スライドが少なくてもDOM的には複製されているのですが、実際には2枚のスライドしか入れ替わっていないようでした。

なので対策としては3枚以上で使用していただくしかなさそうです。(2種類でループさせたい場合は3枚目・4枚目を同じ画像にしていただくと良いかと思います。)

SWELL開発者です。

 
投稿済 : 02/05/2022 11:52 am
suya reacted
ari.hana.maon
(@ari-hana-maon)
投稿: 10
メンバー
Topic starter
 

@loos_ryo

調査いただきありがとうございます!
連絡いただいた対策(3枚目・4枚目を同じ画像にする)を実施します 😀 
※カクツキ発生しませんでした 👍 

この方法が思いつきませんでした 😱 (笑)感謝!

 
投稿済 : 02/05/2022 4:34 pm
reacted
ari.hana.maon
(@ari-hana-maon)
投稿: 10
メンバー
Topic starter
 

@loos_ryo

SWELLテーマを Ver2.6.1.4 → 2.6.2 へアップデートしたところ、カクつき対応策(3,4枚目に同じ画像を入れる)でもカクつきが再発してしまいました

1A→2B→3A→4B→→→1A(カクッ)→2B→3A→4B→→→1A(カクッ)→2B→3A→4B
Edge,Chrome,Firefoxで確認

試しに、別名にした同画像(AをリネームしてC、BをリネームしてDにしてアップロード)を入れてみましたが2週目の1画像目でカクつきます
A→B→C[A]→D[B]→→→A(カクッ)→B→C[A]→D[B]→→→A(カクッ)→B→C[A]→D[B]

※3,4枚目の画像を削除してもカクつきます
※画像を3枚にしても2週目の1画像目でカクつきます

いろいろ調査していただいたばっかりなので再度スレッドを立てるのも心苦しいので、まずは"未解決"に戻させていただきました 😥 

 
投稿済 : 07/05/2022 12:04 pm
kojmadesign reacted
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

ぬ、ほんとですか…💦

ちょっとまた確認しておきます!

SWELL開発者です。

 
投稿済 : 07/05/2022 12:10 pm
ari.hana.maon
(@ari-hana-maon)
投稿: 10
メンバー
Topic starter
 

@loos_ryo

WordPress: 6.0
SWELL: 2.6.4.1

に先程アップデートしてみましたがカクツキはそのままでした 😥 
(Edge,Chrome,Firefoxで確認)
簡単ですがご報告までに

 
投稿済 : 25/05/2022 11:14 am
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

すみません、2.6.4.2ではいかがでしょう?

SWELL開発者です。

 
投稿済 : 26/05/2022 10:47 pm
ari.hana.maon
(@ari-hana-maon)
投稿: 10
メンバー
Topic starter
 

@loos_ryo

V2.6.4.2で確認しました

連絡いただいた対策(3枚目・4枚目を同じ画像にする)でカクツキ解消しました! 😀 
(Edge,Chrome,Firefoxで確認)

※余談ですが、やはり2枚の画像だけではカクツキは発生しました 😣 

本件、解決しました。ありがとうございました!

 
投稿済 : 27/05/2022 11:23 pm
skillsharejp reacted
yamowo
(@yamowo)
投稿: 30
メンバー
 

すでに解決されているかもしれませんが 😀 

スライドが2枚でも以下の方法でカクツキを解消できました。

https://twitter.com/yamowo_claude/status/1771078415665520782

SWELLでニッチなカスタマイズして遊んでます #ヤモヲのひとりあそび

 
投稿済 : 22/03/2024 4:39 pm
共有: