TailwindCSS 및 Flowbite를 사용하여 저장된 localStorage 값을 기반으로 캐러셀 항목 수 설정

Question

TailwindCSS와 Flowbite를 사용하여 내 페이지에 캐러셀을 추가하세요. 또한 기본적으로 캐러셀의 두 항목 사이를 순환할 수 있는 토글 스위치 요소도 추가했습니다(선택됨 = 슬라이드 2, 선택 취소됨 = 슬라이드 1).

이 방법은 작동합니다. localStorage에 저장된 값을 기반으로 로드 시 해당 토글을 "슬라이드 2"로 설정하려고 하다가 막혔습니다.

내 localStorage 값이 올바르게 저장/검색되고 있음을 확인했습니다("예" 및 "아니요" 문자열). 그런 다음 로드 시 캐러셀을 슬라이드 1("아니요" 값) 또는 슬라이드 2("예" 값)로 설정하려고 시도했지만 무엇을 시도하더라도 항상 슬라이드 1이 표시되었습니다.

"slideTo()" 및 "next()" 메소드를 시도했지만 둘 다 작동하지 않는 것 같습니다(변경 이벤트에서는 작동하지만 내 로딩 기능에서는 작동하지 않습니다).

콘솔에 오류가 없습니다. 내가 말했듯이 스위치는 페이지가 로드되고 슬라이드 사이를 올바르게 순환한 후에 제대로 작동하지만 페이지가 로드될 때 올바른 슬라이드를 설정하지 않습니다(따라서 표시된 슬라이드가 스위치의 정확한 설정과 일치하지 않습니다).

Flowbite 캐러셀 문서: https://flowbite.com/docs/comComponents/carousel/

내 코드는 다음과 같습니다.

window.addEventListener('load', function () {
    show_loader("service-suspended-container");

    // Sidebar Toggle Defaults and Handler
    const exclude_suspended_toggle = document.getElementById('exclude-suspended-toggle');

    // Determine which slide to display based on user's preference
    var starting_item = 0;
    if (('metrics-exclude-suspended' in localStorage) && localStorage.getItem('metrics-exclude-suspended') === 'yes') {
        starting_item = 1;
    }
    
    const carousel_items = [
        {
            position: 0,
            el: document.getElementById('carousel-item-1')
        },
        {
            position: 1,
            el: document.getElementById('carousel-item-2')
        }
    ];

    const options = {
        defaultPosition: starting_item
    }

    // Carousel object for controlling slide
    var carousel = new Carousel(carousel_items, options);

    // Ecclude suspended toggle handler
    exclude_suspended_toggle.addEventListener('change',  (event) => {
        console.log("Event fired");
        if (event.currentTarget.checked) {
            // Make toggle checked
            console.log("Toggle now checked");
            localStorage.setItem('metrics-exclude-suspended', 'yes');
            carousel.slideTo(1);
        } else {
            // Uncheck toggle
            console.log("Toggle now unchecked");
            localStorage.setItem('metrics-exclude-suspended', 'no');
            carousel.slideTo(0);
        }
    });

    // Determine default check state of toggle and slide from user's preferences
    if (('metrics-exclude-suspended' in localStorage) && localStorage.getItem('metrics-exclude-suspended') === 'yes') {
        console.log("enabled from storage...");
        // Make toggle checked
        exclude_suspended_toggle.checked = true;
        carousel.slideTo(1);
    } else {
        console.log("disabled from storage...");
        // Uncheck toggle
        exclude_suspended_toggle.checked = false;
        carousel.slideTo(0);
    }
});

Answer 1

선택한 속성을 프로그래밍 방식으로 변경하면 변경 이벤트가 트리거되지 않습니다. 변경 이벤트가 발생하지 않으므로 이벤트 리스너가 호출되지 않습니다.

변경 이벤트를 트리거하는 한 가지 방법:

으아아아

따라서 코드에서는 다음과 같습니다.

으아아아