Question

我正在使用bootstrap carousel制作缩略图轮播。但是我需要修改数据滑动行为，因为我正在动态地拉入轮播项目。所以我要做的是在data-slide-to属性中添加一个ID（类似于3672764的图像ID），点击缩略图，它应该滑动到具有相同ID的幻灯片。< / p>

这是代码：

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

任何想法如何做到这一点？

数据滑动到ID - Bootstrap轮播

0 个答案: