所以我有一个 Shopify 网站的特色部分,我最初打算设置一个静态数据数组,并让特色产品每隔几秒淡入/淡出。但是,我的 JS 还没有工作,但我肯定它是正确的。这是Shopify本身的问题吗?如果有人能向我解释淡入/淡出或为特定 div 创建迷你 slider 的方法,我将非常感激。
我试图淡出 div“.big-product”
这是进一步可视化的屏幕截图。
<h2 class="light">Featured Products</h2>
{% if collections.frontpage.products.size > 0 %}
<div class="big-product" id="featprod">
<div class="product-image" id="product-image">
<a href="{{ product.url | within: collections.frontpage }}" title="{{ product.title | escape }} — {{ product.description | strip_html | truncate: 50 | escape }}"><img src=" {{ product.images.first | product_img_url: 'medium' }}" alt="{{ product.title | escape }}" /> </a>
<div class="product-info">
<h3 class="title"><a href="{{ product.url | within: collections.frontpage }}">{{ product.title }}</a></h3>
<p class="price">
{{ product.vendor }}
</p>
<p class="description">{{ product.description | strip_html | truncatewords: 40 | escape_html }}</p>
<form action="/cart/add" method="post">
{% if product.variants.size == 1 %}
<!-- If there is only 1 variant, only show the purchase button -->
<input type="hidden" name="id" value="{{ product.variants.first.id }}" id="variant-{{ variant.id }}" />
{% else %}
<select name="id">
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}" id="variant-{{ variant.id }}">
{{ variant.title | escape }} for {{ variant.price | money }}
</option>
{% else %}
<option value="{{ variant.id }}" id="variant-{{ variant.id }}" disabled="disabled" class="disabled">
{{ variant.title | escape }} — SOLD OUT
</option>
{% endif %}
{% endfor %}
</select>
{% endif %}
<input type="submit" href="{{ product.url }}" class="button" name="add" value="add to cart" />
<a href="{{ product.url | within: collections.frontpage }}" class="button">details</a>
</form>
<p class="tags alt">
{{ product.tags | join: ', ' }}
</p>
最佳答案
这是一个快速 slider 示例。我相信有更优雅的方法可以达到同样的效果。我只是从功能数组中提取内容"template"并将其放入功能 div 中。然后淡入内容。
var start = 1;
function moveSlider () {
$feature.children('div').remove();
$feature.html(features[start]);
$feature.children('div').fadeIn();
start++;
if (start == features.length) {
start = 0;
}
};
setInterval(function () {
moveSlider();
}, 3000);
关于javascript - Shopify 特色产品 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27429280/