Скрыть / показать пейджер в цикле jQuery

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

Я пытался найти решение Саймона Арнольдса, но jQuery Cycle связывал клик даже, чтобы показать второй слайд как первой, так и второй ссылкам. Вот решение, на котором я в итоге остановился:

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

Answer 2

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

Answer 3

Вы также можете сделать это в 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) для создания ссылок в вашей навигации. Он будет игнорировать первый элемент индекса, создаст две ссылки для второго, чтобы компенсировать первый, и вернет нормальные ссылки для остальных. Надеюсь, это поможет кому-то:)