问题

I can provide the translated code portion for your request:

在进行了 `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);
}

然而，轮播不起作用。

我猜想，我需要在创建和附加 HTML 元素后重新初始化轮播。所以，我的问题是：

如何在 Ajax 调用后重新初始化 bootstrap 轮播，而不使用 jQuery？

请注意，这是原始代码的翻译，如果需要进一步的帮助或解释，请随时告诉我。

<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.

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);

}

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>