效果演示

主要源码如下

import "./style.css"

Vue.createApp({
    setup() {
        let items = Vue.reactive([]);

        let xhr = new XMLHttpRequest();
        xhr.onload = () => {
            let doc = xhr.responseXML;

            items.splice(0, items.length);
            doc.querySelectorAll("item").forEach(it => {
                items.push({
                    photo: it.getAttribute("photo"),
                    title: it.getAttribute("title"),
                    description: it.getAttribute("description")
                });
            });
        };
        xhr.open("GET", "config.xml");
        xhr.send();

        return {items}
    }
}).mount("#carouselExampleCaptions");

const carousel = bootstrap.Carousel.getOrCreateInstance('#carouselExampleCaptions', {ride: "carousel"});