在进行了 `Ajax 调用` 后，我正在设置 `bootstrap 轮播` 到 DOM 中。所以，我在页面加载后附加元素和类，如下所示。
```javascript
async function ajaxCall() {
	let data = await fetch('ApiLink');
	let jsonData = await data.json();
	let carousel = document.createElement('section');
	let inner = document.createElement('div');
	carousel.id = 'slider';
	carousel.className = 'carousel carousel-dark slide';
	carousel.setAttribute('data-bs-ride', 'carousel');
	inner.className = 'carousel-inner';
	jsonData.data.forEach(data => {
		let item = document.createElement('div');
		let avatar = document.createElement('img');
		item.className = 'carousel-item';
		avatar.src = data.avatar;
		item.appendChild(avatar);
		inner.appendChild(item);
	});
	inner.querySelector('.carousel-item').classList.add('active');
	carousel.appendChild(inner);
	document.body.appendChild(carousel);
}

请注意，这是原始代码的翻译，如果需要进一步的帮助或解释，请随时告诉我。
<details>
<summary>英文:</summary>
I&#39;m setting up the `bootstrap carousel` after the `Ajax call` to the DOM. So, I&#39;m appending elements and classes `after the page load` as below.

let carousel = document.createElement('section');
let inner = document.createElement('div');
carousel.id = 'slider';
carousel.className = 'carousel carousel-dark slide';
carousel.setAttribute('data-bs-ride', 'carousel');
inner.className = 'carousel-inner';
jsonData.data.forEach(data => {
	let item = document.createElement('div');
	let avatar = document.createElement('img');
	item.className = 'carousel-item';
	avatar.src = data.avatar;
	item.appendChild(avatar);
	inner.appendChild(item);
});
inner.querySelector('.carousel-item').classList.add('active');
carousel.appendChild(inner);
document.body.appendChild(carousel);

However, the carousel doesn't work.
I guess, I need to reinitialize the carousel after creating and appending the HTML elements. So, my question is:
How can I reinitialize the bootstrap carousel after the Ajax call **without using jQuery**?
</details>
# 答案1
**得分**: 1
根据[文档][1]，在创建您的滑块元素后，您可以使用以下代码创建一个轮播实例：
    let carousel = new bootstrap.Carousel(slider, {});
此外，请查看轮播方法。因此，您可以找到`getOrCreateInstance`，它返回与DOM元素关联的轮播实例，或者在未初始化时创建一个如下：
    bootstrap.Carousel.getOrCreateInstance(slider, {});
顺便说一下，您可以将任何属性作为第二个参数传递给您的滑块。
另外，`data-bs-ride`属性在页面加载时仅读取一次。因此，在Ajax调用中无需设置它。
  [1]: https://getbootstrap.com/docs/5.1/components/carousel/#methods
<details>
<summary>英文:</summary>
Based on the [documentation][1], you can make a carousel instance with the carousel constructor after creating your slider element as below:
    let carousel = new bootstrap.Carousel(slider, {});
Further, take a look at the carousel methods. So, you can find the `getOrCreateInstance` which returns a carousel instance associated with a DOM element, or create a new one in case it wasn&#39;t initialized as below:
    bootstrap.Carousel.getOrCreateInstance(slider, {});
FYI, you can pass any attributes to your slider as the second parameter.
Also, the `data-bs-ride` attribute reads once on page load. So, you don&#39;t need to set it up in your Ajax call.
  [1]: https://getbootstrap.com/docs/5.1/components/carousel/#methods
</details>