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

이 코드와 몇 가지 문제가 있습니다 작동하지 않습니다. 첫 번째 단계는 모든 후속 지표가 두 번째 이미지를 대상으로하는 것입니다. 두 번째는 추천 이미지가 일반적으로 첫 번째 이미지이지만 보증이 없으므로 이미지가 추천 이미지인지 여부를 테스트해야합니다.

시도 :

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