Shopifyブートストラップカルーセル

Question

私はブートストラップカルーセルを使って作業しています。まず、正しい量の画像が表示されているインジケータに問題があります。しかし、第二インジケータは、それはもはや

<div id="carousel" class="carousel slide"> 
 
    
 
    \t \t \t 
 
    <!-- 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> \t 
 
      {% 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> 
 
    \t \t 
 
</div>

Answer 1

に動作インジケータをクリックした後、あなたのコードでカップルの問題があります。最初のものは、次のすべてのインジケータが2番目のイメージをターゲットにしていることです 2番目の画像は通常は最初の画像ですが、保証はありませんので、画像が注目画像であるかどうかをテストする必要があります。

試してみてください。

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