jquery - 在 jQuery Cycle 中隐藏/显示分页器

Question

我正在 Shopify 中使用 Cycle 来制作产品幻灯片。它效果很好，但如果只有一张可用的产品图像，我想隐藏寻呼机。

循环中是否有为此构建的函数？

如果没有，有谁知道如何返回shopify中该产品有多少个可用的产品图片，以便我可以添加一个display none类(如果它小于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将调用一个函数(在本例中为分页)来在导航中创建链接。它将忽略第一个索引元素，为第二个索引元素创建两个链接以补偿第一个索引元素，并为其他索引元素返回正常链接。希望这对某人有帮助:)