动态加载Bootstrap Carousel的初始化与重置

// 获取Carousel容器的DOM元素
let myCarouselElement = document.getElementById('myCarouselId');

// 创建一个新的Carousel实例
let carouselInstance = new bootstrap.Carousel(myCarouselElement, {
    // 可选配置项，例如：
    interval: 2000, // 自动切换间隔（毫秒）
    wrap: true      // 是否循环播放
});

// 获取Carousel容器的DOM元素
let myCarouselElement = document.getElementById('myCarouselId');

// 获取或创建一个Carousel实例
let carouselInstance = bootstrap.Carousel.getOrCreateInstance(myCarouselElement, {
    // 可选配置项
    interval: 3000, // 自动切换间隔
    keyboard: true  // 允许键盘导航
});

async function initializeDynamicCarousel() {
    try {
        // 1. 发起Ajax请求获取数据
        const response = await fetch('https://api.example.com/carousel-data'); // 替换为您的实际API链接
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const jsonData = await response.json();

        // 2. 构建Carousel的HTML结构
        let carouselSection = document.createElement('section');
        let carouselInner = document.createElement('div');
        carouselSection.id = 'dynamicSlider'; // 为Carousel容器设置唯一ID，以便后续引用
        carouselSection.className = 'carousel carousel-dark slide';
        // 注意：data-bs-ride="carousel" 属性在手动初始化时并非必需，甚至可能被忽略。
        // carouselSection.setAttribute('data-bs-ride', 'carousel');
        carouselInner.className = 'carousel-inner';

        if (jsonData && jsonData.data && Array.isArray(jsonData.data)) {
            jsonData.data.forEach((itemData, index) => {
                let carouselItem = document.createElement('div');
                let avatarImage = document.createElement('img');
                carouselItem.className = 'carousel-item';
                avatarImage.src = itemData.avatar; // 假设数据中包含avatar字段
                avatarImage.alt = itemData.description || 'Carousel Image'; // 添加alt属性以提高可访问性
                avatarImage.className = 'd-block w-100'; // Bootstrap图片样式

                if (index === 0) {
                    carouselItem.classList.add('active'); // 第一个item设置为active
                }

                carouselItem.appendChild(avatarImage);
                carouselInner.appendChild(carouselItem);
            });
        } else {
            console.warn('API返回数据结构不符合预期或无数据。');
            return; // 没有数据则不继续构建
        }

        carouselSection.appendChild(carouselInner);
        document.body.appendChild(carouselSection); // 将Carousel添加到DOM中

        // 3. 在Carousel元素添加到DOM后，对其进行初始化
        const sliderElement = document.getElementById('dynamicSlider');
        if (sliderElement) {
            // 使用getOrCreateInstance确保只创建一个实例
            const myCarousel = bootstrap.Carousel.getOrCreateInstance(sliderElement, {
                interval: 5000, // 示例：每5秒切换一次
                pause: 'hover'  // 示例：鼠标悬停时暂停切换
            });
            console.log('Bootstrap Carousel initialized successfully!', myCarousel);
        } else {
            console.error('Carousel元素在添加到DOM后未找到。');
        }

    } catch (error) {
        console.error('获取或处理数据时发生错误:', error);
    }
}

// 在适当的时机调用函数以启动整个过程，例如页面加载完毕后
// document.addEventListener('DOMContentLoaded', initializeDynamicCarousel);