我已经将WOWSLIDER用于产品详细信息页面，并且工作正常，但是当我更改颜色属性并且根据当前图像幻灯片不处于活动状态时。 Screenshot
我分享了源代码。请看一看。还附有截图 哇滑块显示左侧图像 显示右侧属性。
{% include 'sca_freegift_price' with product %}
{% include 'breadcrumbs' %}
{% assign variant = product.selected_or_first_available_variant %}
{% if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' %}
{% assign found_a_collection = false %}
{% for c in product.collections %}
{% if found_a_collection == false and c.handle != 'frontpage' and c.handle != 'all' %}
{% assign found_a_collection = true %}
{% assign collection = c %}
{% endif %}
{% endfor %}
{% endif %}
{% unless form_id %}
{% assign form_id = product.id %}
{% endunless %}
<section
class="main-product-wrap
product-wrap
{% if section.settings.related-products %}related-products-position-{{ section.settings.related-products-position }}{% endif %}"
itemscope
itemtype="http://schema.org/Product"
data-product-id="{{ product.id }}"
data-images-layout="{{ section.settings.images-layout }}"
{% if section.settings.zoom %}data-zoom{% endif %}
{% if section.settings.linked-options %}data-linked-options{% endif %}
{% if section.settings.ajax %}data-ajax{% endif %}
data-section-id="{{ section.id }}"
data-section-type="product">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product | img_url: 'grande' }}">
<div class="product-images">
{% if section.settings.images-layout == 'slideshow' %}
<div id="wowslider-container1">
<div class="ws_images" ><ul>
{% assign mainImage = variant.image | default: product.featured_image %}
{% for image in product.images %}
<li class="extraimage"><img src="{{ image | img_url: '1024x1024' }}" alt="" id="wows1_{{ forloop.index }}"/></li>
{% endfor %}
</ul>
</div>
<div class="ws_thumbs">
<div>
{% for image in product.images %}
{% if mainImage == image %}
<a href="#" class="ws_selthumb"><img src="{{ mainImage | img_url: '1024x1024' }}" alt="" /></a>
{% else %}
<a href="#"><img src="{{ image | img_url: '1024x1024' }}" alt="" /></a>
{% endif %}
{% endfor %}
</div>
</div>
<div class="ws_shadow"></div>
</div>
<div class="product-thumbnails-outer-wrapper">
<div class="sca-fg-cat-list" style="display:none;" name="secomapp-fg-data-{{ product.id }}"> </div>
</div>
{% if product.images.size > 1 %}
{% if product.tags contains "cabin" %}
<div class="cabin-logo-container">
<div class="product-cabin"><h5>This product is suitable to take as a cabin item on:</h5></div>
{% else %}
{% endif %}
{% if product.tags contains "easyjet" %}
<div class="easyjet-cabin"><img src="https://cdn.shopify.com/s/files/1/1567/7015/files/easyjet_ca2d8259-58eb-4e77-b7f1-75e1ca187b8c.jpg?14358281107398952302"></div>
{% else %}
{% endif %}
{% if product.tags contains "ryanair" %}
<div class="ryanair-cabin"><img src="https://cdn.shopify.com/s/files/1/1567/7015/files/ryanair_734b4c75-c1db-452f-93b1-61fc09939573.png?14358281107398952302"></div>
{% else %}
{% endif %}
{% if product.tags contains "british-airways" %}
<div class="britishairways-cabin"><img src="https://cdn.shopify.com/s/files/1/1567/7015/files/british_airways_bf46e962-6f35-43ba-b78a-dcec0179b12b.png?14358281107398952302"></div>
</div>
{% else %}
{% endif %}
{% endif %}
{% else %}
{% for image in product.images %}
<div class="product-image">
<img
alt="{{ image.alt | escape }}"
src="{{ image | img_url: '1024x1024' }}"
data-image-id="{{ image.id }}"
>
</div>
{% endfor %}
{% endif %}
</div>
<div class="product-details-wrapper">
<div class="product-details">
{% if section.settings.vendor %}
<a class="product-vendor" href="{{ product.vendor | url_for_vendor }}">{{ product.vendor }}</a>
{% endif %}
<h1 class="product-title" itemprop="name"><div style="position:relative;"> {{ product.title }} <div name="secomapp-fg-image-{{ product.id }}" style="display: none;"> {{ "icon-freegift.png" | asset_url | img_tag: "Free Gift", "sca-fg-img-label" }} </div> </div></h1>
<p class="product-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<meta itemprop="price" content="{{ sca_price_min | money_without_currency }}">
<span class="product-price-minimum money">
{{ variant.price | money }}
</span>
{% if variant.compare_at_price > variant.price %}
<span class="product-price-compare money original">
{{ variant.compare_at_price | money }}
</span>
{% endif %}
{% if product.tags contains "shipped-by-supplier" %}
<div class="supplier-delivery-icon"><img src="https://cdn.shopify.com/s/files/1/1567/7015/files/delivery.png?7054402976003297472" alt="Shipped by supplier"><a href="https://www.londonluggage.co.uk/pages/delivery"><p>Shipped by supplier</p></a></div>
{% else %}
{% endif %}
{% if product.available %}
<link itemprop="availability" href="http://schema.org/InStock">
{% else %}
<link itemprop="availability" href="http://schema.org/OutOfStock">
{% endif %}
</p>
<form class="product-form"
id="product-form-{{ form_id }}"
action="/cart/add"
method="post"
data-product-form="{{ form_id }}">
{% if sca_product_variantCount > 1 %}
<div class="product-options">
{% include 'product-options-dropdown' %}
<div class="selector-wrapper no-js-required">
<label for="product-select-{{ form_id }}"></label>
<select
class="product-select"
name="id"
id="product-select-{{ form_id }}">
{% for variant in product.variants %}
{% unless variant.metafields.secomapp.freegifts %}
{% unless variant.title contains '(Freegifts)' %}
{% if variant.available %}
<option
{% if variant == selected_variant %}selected="selected"{% endif %}
value="{{ variant.id }}" data-variant-id="{{ variant.id }}" data-sku="{{ variant.sku }}">
{{ variant.title }} - {{ variant.price | money }}
</option>
{% else %}
<option disabled="disabled" data-variant-id="{{ variant.id }}" value="{{ variant.id }}">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{%endunless%}
{%endunless%}
{% endfor %}
</select>
</div>
</div>
{% else %}
<input
class="product-select"
name="id"
value="{{ product.variants[0].id }}"
type="hidden"
data-variant-title="{{ product.variants[0].title }}" />
{% endif %}
{% if product.available %}
<div id="infiniteoptions-container"></div>
<div id="uploadery-container"></div>
<div class="product-quantity inline-input-wrapper">
<label>{{ 'general.general.quantity' | t }}</label>
<input type="text" name="quantity" value="1" />
</div>
{% endif %}
{% if section.settings.share-buttons %}
{% include 'share-buttons' %}
{% endif %}
<div class="add-to-cart">
{% if variant.available %}
<input type="submit" value="{{ 'products.product.add_to_cart' | t }}" />
{% else %}
<input type="submit" class="disabled" disabled="disabled" value="{{ 'products.product.sold_out' | t }}" />
{% endif %}
</div>
<div class="product-message"></div>
</form>
{% if product.description != blank %}
<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>
{% endif %}
</div>
</div>
{% assign addToCartText = 'products.product.add_to_cart' | t %}
{%
include 'product-json',
id: product.id,
add_to_cart_text: addToCartText,
enable_history: true
%}
</section>
{% if section.settings.related-products %}
{%- assign related_products_position = section.settings.related-products-position -%}
{% include 'related-products' related_products_position: related_products_position %}
{% endif %}
<script>
// required for splitting variants
// see ProductView
window.products["{{ product.id }}"] = {{ product | json }};
FirstVariant["{{ product.id }}"] = {{ product.selected_or_first_available_variant.id | json }};
</script>