Bootstrap Carousel动态加载与初始化：无jQuery解决方案

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

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

/**
 * 模拟从API获取数据，并动态创建Bootstrap Carousel。
 */
async function loadAndInitializeCarousel() {
    try {
        // 模拟Ajax调用获取数据
        // 实际应用中，'ApiLink' 替换为您的实际API端点
        let response = await fetch('https://api.example.com/carousel-data'); // 假设这是一个返回JSON的API
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        let jsonData = await response.json();

        // 创建Carousel的根容器
        let carouselElement = document.createElement('section');
        carouselElement.id = 'dynamicSlider'; // 为Carousel设置一个唯一的ID
        carouselElement.className = 'carousel carousel-dark slide';
        // 注意：data-bs-ride="carousel" 属性在手动初始化时不是必需的，
        // 且仅在页面初始加载时有效。在此处设置无效。
        // carouselElement.setAttribute('data-bs-ride', 'carousel');

        // 创建Carousel的内部容器
        let innerElement = document.createElement('div');
        innerElement.className = 'carousel-inner';

        // 遍历数据，创建Carousel项目
        if (jsonData.data && Array.isArray(jsonData.data)) {
            jsonData.data.forEach((itemData, index) => {
                let carouselItem = document.createElement('div');
                carouselItem.className = 'carousel-item';
                // 第一个项目需要添加 'active' 类以显示
                if (index === 0) {
                    carouselItem.classList.add('active');
                }

                let avatarImage = document.createElement('img');
                avatarImage.src = itemData.avatar; // 假设数据中包含avatar字段
                avatarImage.className = 'd-block w-100'; // Bootstrap图片样式
                avatarImage.alt = `Slide ${index + 1}`;

                let captionDiv = document.createElement('div');
                captionDiv.className = 'carousel-caption d-none d-md-block';
                let captionTitle = document.createElement('h5');
                captionTitle.textContent = itemData.title || `Title ${index + 1}`; // 假设数据中包含title字段
                let captionText = document.createElement('p');
                captionText.textContent = itemData.description || `Description for slide ${index + 1}.`; // 假设数据中包含description字段

                captionDiv.appendChild(captionTitle);
                captionDiv.appendChild(captionText);

                carouselItem.appendChild(avatarImage);
                carouselItem.appendChild(captionDiv);
                innerElement.appendChild(carouselItem);
            });
        } else {
            console.warn("API返回的数据格式不符合预期，无法创建Carousel项目。");
            return; // 如果没有数据，则不继续创建Carousel
        }

        // 添加控制按钮（可选）
        let prevButton = document.createElement('button');
        prevButton.className = 'carousel-control-prev';
        prevButton.type = 'button';
        prevButton.setAttribute('data-bs-target', '#dynamicSlider');
        prevButton.setAttribute('data-bs-slide', 'prev');
        prevButton.innerHTML = '<span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span>';

        let nextButton = document.createElement('button');
        nextButton.className = 'carousel-control-next';
        nextButton.type = 'button';
        nextButton.setAttribute('data-bs-target', '#dynamicSlider');
        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(innerElement);
        carouselElement.appendChild(prevButton);
        carouselElement.appendChild(nextButton);

        // 将创建的Carousel元素添加到DOM中
        document.body.appendChild(carouselElement); // 或者添加到页面上指定的容器

        // 关键步骤：在Carousel元素添加到DOM后，手动初始化它
        // 推荐使用 getOrCreateInstance，它更安全
        let myCarouselInstance = bootstrap.Carousel.getOrCreateInstance(carouselElement, {
            interval: 3000, // 每3秒切换一次
            ride: 'carousel' // 启用自动播放，等同于data-bs-ride="carousel"
        });

        console.log('Bootstrap Carousel已成功初始化！', myCarouselInstance);

        // 您可以通过 myCarouselInstance 变量来控制Carousel，例如：
        // myCarouselInstance.pause(); // 暂停自动播放
        // myCarouselInstance.cycle(); // 恢复自动播放
        // myCarouselInstance.to(2); // 跳转到第三张幻灯片 (索引从0开始)

    } catch (error) {
        console.error('加载或初始化Carousel时发生错误:', error);
    }
}

// 在页面加载完成后调用此函数，例如：
// document.addEventListener('DOMContentLoaded', loadAndInitializeCarousel);
// 或者在您的Ajax回调函数中调用