带有 scriban 的动态 Bootstrap 轮播

如何解决带有 scriban 的动态 Bootstrap 轮播

我正在制作一个基于 C# 的网站，加载了 scriban 和 bootstrap 插件（该库名为 GenHTTP）。

我正在尝试使用动态数据制作可导航的轮播。数据不是很复杂，只是一个List，其中第一个字符串是内容类型，第二个字符串是URI。

例如，YouTube 视频将是 ("VIDEO","http://youtube.com/randomletters")

我正在使用 scriban 更改此内容的轮播内容（iframe 或 img，具体取决于），并且有效。

但是，我无法滚动轮播中的内容。我相信这是因为我正在积极将第一项设置为“carousel-item-active”。我这样做是因为将所有项目都设置为“轮播项目”意味着没有任何显示，但我认为因为我只将第一个项目设置为活动状态，所以我将其锁定。

这里有没有人有解决方法，您可以使用 {{for x in y.z}} 生成轮播卡片列表，但仍允许它分配一张卡片以激活？

当前相关的div如下：

{{if data.embed.size > 0}}
<div class="row">
  <div class="col-sm rounded">
    <hr />
    <h3>Preview</h3>
    <hr />
  </div>
</div>
<div class="row" style="background-color:#454545">
  <div class="col-sm-12">
    <div id="c_prev" class="carousel slide" data-interval="false">
      <div class="carousel-inner">
        {{for embed in data.embed}}
        <div class="carousel-item">
          {{if embed.item1 == "VIDEO"}}
          <div class="d-block w-100">
            <iframe src="{{embed.item2}}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>
          {{else if embed.item1 == "IMAGE"}}
          <img class="d-block w-100" src="/{{embed.item2}}" /> {{end}}
        </div>
        {{end}}
      </div>
      <a class="carousel-control-prev" href="#c_prev" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#c_prev" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>
{{end}}

感谢您的帮助