TailwindCSS と Flowbite を使用して、保存された localStorage 値に基づいてカルーセル アイテム数を設定します

Question

TailwindCSS と Flowbite を使用してページにカルーセルを追加します。また、基本的にカルーセル内の 2 つの項目間を循環できるようにするトグル スイッチ要素も追加しました (チェックあり = スライド 2、チェックなし = スライド 1)。

これは機能します。私が行き詰まったのは、localStorage に保存されているトグルの値に基づいて、ロード時に「スライド 2」に設定しようとしたことでした。

localStorage 値が正しく保存/取得されていることを確認しました (「はい」と「いいえ」の文字列として)。次に、読み込み時にカルーセルをスライド 1 (「いいえ」値) またはスライド 2 (「はい」値) に設定しようとしましたが、何を試しても常にスライド 1 が表示されました。

「slideTo()」メソッドと「next()」メソッドを試しましたが、どちらも機能しないようです（これらは変更イベントでは機能しますが、読み込み関数では機能しません）。

コンソールにエラーはありません。先ほども述べたように、ページが読み込まれてスライド間を正しく循環した後はスイッチは正常に機能しますが、ページの読み込み時に正しいスライドが設定されないだけです (そのため、表示されるスライドはスイッチの設定と正確に一致しません)。

Flowbite カルーセルのドキュメント: https://flowbite.com/docs/components/carousel/

これは私のコードです:

ああああ

Answer 1

選択したプロパティをプログラムによって変更していますが、変更イベントはトリガーされません。変更イベントが発生しないため、イベント リスナーは呼び出されません。

変更イベントをトリガーする方法:

リーリー

コードでは次のようになります:

リーリー