Question

我在shopify中使用循环进行产品幻灯片放映。它工作得很好，但如果只有一个产品图像，我想隐藏寻呼机。

周期内是否有内置功能？

如果没有，是否有人知道如何在shopify中返回该产品可用的产品图片数量，因此如果它小于2，我可以添加一个无类别的显示。

非常感谢任何帮助。谢谢！

想出来......如果有图像2，则只加载周期。

{% if product.images[2] != undefined %}
    <script type="text/javascript">
        $('#prodImages').before('<div id="prodnav">').cycle({ 
            fx:     'fade', 
            speed:  1500, 
            timeout: 5000, 
            pager: '#prodnav'
});
    </script>
{% endif %}

Answer 1

您也可以通过以下方式在javascript中执行此操作：

$(function() {
    $('#prodImages').before('<div id="prodnav">').cycle({
        fx: 'fade', 
        speed: 1500, 
        timeout: 5000, 
        pager: '#prodnav',
        pagerAnchorBuilder: paginate
    });
});
function paginate(ind, el) {
    if (ind == 1) { 
        return '<a href="#" class="activeSlide">1</a><a href="#">2</a>' 
    }
    else if (ind > 1) { 
        return '<a href="#">' + parseInt(ind)+1 + '</a>' 
    }
}

添加pagerAnchorBuilder会调用一个函数（在本例中为paginate）来创建导航中的链接。它将忽略第一个索引元素，为第二个索引元素创建两个链接以补偿第一个索引元素并返回其他链接的正常链接。希望这有助于某人：）

Answer 2

我尝试了Simon Arnolds解决方案，但jQuery Cycle正在绑定点击甚至显示第一个和第二个链接的第二张幻灯片。这是我最终解决的解决方案：

$( '#prodnav a:only-child' ).hide();

Answer 3

if ($('#prodImages').children().length < 2) {
    $('#prodnav').hide();
}

在jQuery Cycle中隐藏/显示寻呼机

3 个答案: