Shopify Bootstrap轮播

Question

我正在使用bootstrap carousel进行shopify，首先我对显示正确数量的图像的指示器有疑问。但在第二个指示灯点击指示灯后它不再有效

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>