let myCarousel = new bootstrap.Carousel(element, options);

let myCarousel = bootstrap.Carousel.getOrCreateInstance(element, options);

/**
 * 模擬異步獲取Carousel數(shù)據(jù)并動(dòng)態(tài)加載和初始化Carousel
 */
async function loadAndInitializeDynamicCarousel() {
    console.log('開(kāi)始加載和初始化動(dòng)態(tài)Carousel...');

    // 1. 模擬Ajax請(qǐng)求獲取數(shù)據(jù)
    // 實(shí)際應(yīng)用中，這里會(huì)是一個(gè)真實(shí)的fetch或axios請(qǐng)求到后端API
    const mockApiLink = 'https://api.example.com/carousel-data'; // 替換為你的API鏈接
    let jsonData;
    try {
        // 模擬數(shù)據(jù)，實(shí)際請(qǐng)求會(huì)返回JSON
        // const response = await fetch(mockApiLink);
        // jsonData = await response.json();
        jsonData = {
            data: [
                { id: 1, avatar: 'https://via.placeholder.com/800x400/FF5733/FFFFFF?text=Slide+1', title: '幻燈片一', description: '這是第一張幻燈片的描述內(nèi)容。' },
                { id: 2, avatar: 'https://via.placeholder.com/800x400/33FF57/FFFFFF?text=Slide+2', title: '幻燈片二', description: '這是第二張幻燈片的描述內(nèi)容。' },
                { id: 3, avatar: 'https://via.placeholder.com/800x400/3357FF/FFFFFF?text=Slide+3', title: '幻燈片三', description: '這是第三張幻燈片的描述內(nèi)容。' }
            ]
        };
        console.log('數(shù)據(jù)獲取成功:', jsonData);
    } catch (error) {
        console.error('獲取數(shù)據(jù)失敗:', error);
        return; // 錯(cuò)誤處理
    }

    if (!jsonData || !jsonData.data || jsonData.data.length === 0) {
        console.warn('未獲取到Carousel數(shù)據(jù)或數(shù)據(jù)為空。');
        return;
    }

    // 2. 構(gòu)建Carousel的DOM結(jié)構(gòu)
    const carouselContainer = document.createElement('div'); // 外層容器，便于定位
    carouselContainer.id = 'dynamicCarouselWrapper';
    carouselContainer.style.maxWidth = '800px';
    carouselContainer.style.margin = '50px auto';

    const carouselElement = document.createElement('div');
    carouselElement.id = 'dynamicCarousel'; // 為Carousel設(shè)置唯一ID，用于控制
    carouselElement.className = 'carousel slide carousel-fade'; // 添加fade效果
    // 注意：data-bs-ride="carousel" 屬性在頁(yè)面加載時(shí)讀取，動(dòng)態(tài)添加時(shí)不需要設(shè)置，
    // 因?yàn)槲覀儠?huì)手動(dòng)初始化。如果設(shè)置了，它也不會(huì)自動(dòng)重新初始化。
    // carouselElement.setAttribute('data-bs-ride', 'carousel');

    const innerDiv = document.createElement('div');
    innerDiv.className = 'carousel-inner';

    // 添加Carousel指示器
    const indicatorsDiv = document.createElement('div');
    indicatorsDiv.className = 'carousel-indicators';

    jsonData.data.forEach((itemData, index) => {
        // 創(chuàng)建Carousel Item
        const itemDiv = document.createElement('div');
        itemDiv.className = `carousel-item ${index === 0 ? 'active' : ''}`; // 第一個(gè)item必須是active

        const avatarImg = document.createElement('img');
        avatarImg.src = itemData.avatar;
        avatarImg.alt = itemData.title || 'Carousel Image';
        avatarImg.className = 'd-block w-100'; // Bootstrap圖片樣式

        const captionDiv = document.createElement('div');
        captionDiv.className = 'carousel-caption d-none d-md-block';
        captionDiv.innerHTML = `<h5>${itemData.title}</h5><p>${itemData.description}</p>`;

        itemDiv.appendChild(avatarImg);
        itemDiv.appendChild(captionDiv);
        innerDiv.appendChild(itemDiv);

        // 創(chuàng)建指示器按鈕
        const indicatorButton = document.createElement('button');
        indicatorButton.type = 'button';
        indicatorButton.setAttribute('data-bs-target', '#dynamicCarousel');
        indicatorButton.setAttribute('data-bs-slide-to', index.toString());
        if (index === 0) {
            indicatorButton.classList.add('active');
            indicatorButton.setAttribute('aria-current', 'true');
        }
        indicatorButton.setAttribute('aria-label', `Slide ${index + 1}`);
        indicatorsDiv.appendChild(indicatorButton);
    });

    carouselElement.appendChild(indicatorsDiv);
    carouselElement.appendChild(innerDiv);

    // 添加Carousel控制按鈕
    const prevButton = document.createElement('button');
    prevButton.className = 'carousel-control-prev';
    prevButton.type = 'button';
    prevButton.setAttribute('data-bs-target', '#dynamicCarousel');
    prevButton.setAttribute('data-bs-slide', 'prev');
    prevButton.innerHTML = '<span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span>';
    carouselElement.appendChild(prevButton);

    const nextButton = document.createElement('button');
    nextButton.className = 'carousel-control-next';
    nextButton.type = 'button';
    nextButton.setAttribute('data-bs-target', '#dynamicCarousel');
    nextButton.setAttribute('data-bs-slide', 'next');
    nextButton.innerHTML = '<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span>';
    carouselElement.appendChild(nextButton);

    carouselContainer.appendChild(carouselElement);

    // 3. 將構(gòu)建好的Carousel添加到DOM
    // 假設(shè)頁(yè)面中有一個(gè)ID為'app'的容器
    const appContainer = document.getElementById('app') || document.body;
    appContainer.appendChild(carouselContainer);
    console.log('Carousel DOM結(jié)構(gòu)已添加到頁(yè)面。');

    // 4. 關(guān)鍵步驟：手動(dòng)初始化Bootstrap Carousel
    // 使用getOrCreateInstance方法，因?yàn)樗扑]且健壯
    const myCarouselInstance = bootstrap.Carousel.getOrCreateInstance(carouselElement, {
        interval: 3000, // 自動(dòng)播放間隔3秒
        pause: 'hover', // 鼠標(biāo)懸停時(shí)暫停自動(dòng)播放
        wrap: true      // 循環(huán)播放
    });

    console.log('Bootstrap Carousel 初始化成功！實(shí)例:', myCarouselInstance);

    // 可以通過(guò)實(shí)例調(diào)用Carousel方法，例如：
    // myCarouselInstance.to(1); // 跳轉(zhuǎn)到第二張幻燈片
}

// 示例：在頁(yè)面加載完成后調(diào)用此函數(shù)
document.addEventListener('DOMContentLoaded', () => {
    // 確保頁(yè)面有一個(gè)用于掛載Carousel的元素，例如：
    // <div id="app"></div>
    // 或者直接掛載到body
    loadAndInitializeDynamicCarousel();
});

// 如果你想通過(guò)按鈕觸發(fā)加載，可以這樣做：
// <button id="loadCarouselBtn">加載輪播圖</button>
// document.getElementById('loadCarouselBtn').addEventListener('click', loadAndInitializeDynamicCarousel);