##概要
https://qiita.com/MikaShirahama/items/c0443cf967865e976208
https://takblog.site/web/?p=144
此方のサイトのように、
slick.jsを使用してスライダー作成、スライダーの下のdotsをサムネイル画像に設定し、active-selfがついているときだけcssでdotsのサムネ画像を切り替え、というものを作成しました。
##問題点(スマホ、またはPCのF12による検証のデバイスモードでのみ確認)
https://takblog.site/web/?p=144
正しい挙動まではこちらのサイト様と同じです
1、暗くなっているdotsのサムネ(非選択状態のサムネ)をクリック
2、スライダーがサムネと同じ画像に切り替わる。dotsのサムネ画像が明るいものに切り替わる
3、スライダーを左右どちらかフリック。スライダー画像がフリックした方向に応じて切り替わる、スライダー画像と同じdotsのサムネも選択状態のサムネに切り替わる(ここまで正しい挙動)
-(正)4、最初にクリックしたdotsのサムネが非選択状態のサムネに切り替わる(紹介しているサイト様と同じ挙動)
-(誤)4、最初にクリックしたdotsのサムネからslick-activeクラスが取れず、明るいサムネ(選択状態のサムネ画像)のまま
フリックした後のスライダーのサムネもslick-activeクラスがついていて、dotsのうち2枚が選択状態になる
PCでは確認できず、スマホまたはF12による検証モード->デバイスモードでのみ確認されます
##質問したいこと(修正)
色々試してみましたが以下の部分が原因のようです。
以下のコードを実行しているにもかかわらず、cssが更新されない
javascript
1allSlides = _.$slider 2 .find('.slick-slide') 3 .removeClass('slick-active slick-center slick-current') 4 .attr('aria-hidden', 'true');
androidでこのコードを実行すると、該当のセレクタからremoveClassでクラスが消えているにもかかわらず、slick-activeのみ適用されたままになる
ただし、PC->検証モード->デバイスモードでも同じ現象は発生しますが、ページ上の検索対象となる要素の選択(Ctrl+Shift+C)をしてカーソルをslick-activeが適用されたままになっているものに合わせると、cssが更新され正しい状態になる
つまりは「androidはPCと比べてjqueryやcssの実行タイミング・更新タイミングが違うのか」ということになります
あなたの回答
tips
プレビュー