Shopify Bootstrap 轮播

Question

我正在为 shopify 开发 bootstrap 轮播，首先我遇到了问题，它们显示的图像数量是否正确。但在第二个指标点击指标后它不再有效

<div id="carousel" class="carousel slide">
  
     
    <!-- Indicators -->
    <ol class="carousel-indicators">
        {% for image in product.images %}
            {% if forloop.first %}
                
                <li data-target="#carousel" data-slide-to="0" class="active"></li>
      
            {% else %}
                <li data-target="#carousel" data-slide-to="1"></li> 
            {% endif %}
        {% endfor %}
    </ol>

    <!-- Wrapper for slides -->
          
    <div class="carousel-inner">
      {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
                <div class="item active">
                    <img src="{{ featured_image | img_url: 'master' }}" class="img-responsive" alt="{{ product.title }}" width="100%" />
                </div>
      
      
      {% if count_images > 0 %}
                    {% for image in product.images  offset:1 %} 
                <div class="item">
                    <img src="{{ image | product_img_url: 'master' }}" class="img-responsive" alt="{{ product.title }}" width="100%" style="min;height: 115px !important;" />
                </div> 
    {% endfor %}
    </div>
  {% endif %}
     
          
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel" data-slide="prev">
        <span class="fa fa-arrow-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel" data-slide="next">
        <span class="fa fa-arrow-right"></span>
    </a>
    
</div>

Answer 1

您的代码有几个问题。首先是您所有的后续指标都针对您的第二张图片。第二个是特色图片通常是第一张图片，但不能保证所以你需要测试你的图片是否是特色图片。

尝试：

<div id="carousel" class="carousel slide">

    {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}      
    <!-- Indicators -->
    <ol class="carousel-indicators">
        {% for image in product.images %}

        {% assign activeClass = '' %}
        {% if featured_image.id == image.id %} {% assign activeClass = 'active' %}{% endif %}
        <li data-target="#carousel" data-slide-to="{{forloop.index0}}" class="{{activeClass}}"></li>

        {% endfor %}
    </ol>

    <!-- Wrapper for slides -->

    <div class="carousel-inner">
        {% for image in product.images %}
            {% assign activeClass = '' %}
            {% if featured_image.id == image.id %} {% assign activeClass = 'active' %}{% endif %} 

                <div class="item {{activeClass}}">
                    <img src="{{ image | img_url }}" class="img-responsive" alt="{{ product.title }}" style="min-height: 115px !important;" />
                </div> 
        {% endfor %}
    </div>


    <!-- Controls -->
    <a class="left carousel-control" href="#carousel" data-slide="prev">
        <span class="fa fa-arrow-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel" data-slide="next">
        <span class="fa fa-arrow-right"></span>
    </a>

</div>

Shopify Bootstrap 轮播

Shopify Bootstrap carousel

shopify

twitter-bootstrap-3