Shopify Bootstrap Karussell

Question

Ich arbeite an einem Bootstrap-Karussell für shopify und zuerst habe ich ein Problem mit den Indikatoren, die sie für die richtige Anzahl von Bildern anzeigen. aber nach der zweiten Anzeige auf dem Indikator klicken es nicht mehr funktioniert

<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

Es gibt ein paar Probleme mit Ihrem Code. Der erste ist alle Ihre nachfolgenden Indikatoren zielen auf Ihr zweites Bild. Die zweite ist das vorgestellte Bild wird in der Regel das erste Bild sein, aber es gibt keine Garantie, so müssen Sie testen, ob Ihr Bild das vorgestellte Bild ist oder nicht.

Versuchen:

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