Javascript 数据幻灯片到ID-引导转盘

我正在使用引导旋转木马制作缩略图旋转木马。但是，在动态拉入旋转木马项目时，我需要修改数据幻灯片行为。 所以我要做的是在数据幻灯片属性中添加一个ID（比如3672764，它将是图像ID），然后单击缩略图，它将滑动到具有相同ID的幻灯片

代码如下：

    <div id="carousel" class="carousel slide" data-ride="false">
      <div class="carousel-inner">
      <div class="item active srle" data-id="{{ image.id }}">
      <img src="{{ featured_image | img_url: '1000x1000' }}" alt="{{ featured_image.alt | escape }}" data-product-featured-image>
      <p>{{ featured_image.alt | escape }}</p>
      </div>
      {% for image in product.images offset:1 %}
      <div class="item" data-id="{{ image.id }}">
      <img src="{{ image.src | img_url: '1000x1000' }}" alt="{{ image.alt | escape }}">
      <p>{{ image.alt | escape }}</p>
      </div>
      {% endfor %}
      </div>
    </div>



        <div id="thumbcarousel" class="carousel slide thumbnails-carousel vertical" data-ride="false">
              <div class="carousel-inner">
      {% for image in product.images %}
      <div class="grid__item carousel-padding">
        <div data-target="#carousel" data-slide-to="{{ image.id }}" class="thumb"><img src="{{ image.src | img_url: '160x160' }}" alt="{{ image.alt | escape }}" data-product-single-thumbnail>
  </div>
 </div>
{% endfor %}
 </div>
</div>

{{featured_image.alt | escape}}

{%用于产品中的图像。图像偏移量：1%}
{{image.alt | escape}

{%endfor%}
{%用于product.images%中的图像}
{%endfor%}

---

有什么办法吗？

Bootstrap已经有了这个功能检查：可能重复