Как удалить элемент из часового цикла Cycle2

Мне нужно удалить элемент из слайда jQuery Cycle2, поскольку он вызывает проблемы с доступностью. Это первый слайд в слайд-шоу с содержимым HTML, поэтому он находится в дозорном div.

Такая простая команда jQuery не работает:

$( '.cycle-sentinel .cycle-search' ).destroy();

Даже когда я пытаюсь использовать обратный вызов, инициализированный циклом (правда, я не уверен, что использую его правильно). Чтобы сделать страницу совместимой с ADA, мне нужно иметь возможность удалить эту форму или внести изменения в некоторые элементы. Вот соответствующий слайд html:

<div class="cycle-slide cycle-sentinel" style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;">
<img src="image.jpg" width="100%" alt="alt" style="visibility: hidden;">
<div class="cycle-search" style="visibility: hidden;">
<!-- role="search" -->
    <form method="get" class="searchform" action="#" style="visibility: hidden;">
                <label for="s2" class="screen-reader-only" style="visibility: hidden;">Enter search term</label>
            <input type="text" value="" class="homeform" placeholder=" ? Find information, services, agencies and more..." style="visibility: hidden;">                     
                    <button type="submit" class="home-search-button" style="visibility: hidden;">
                        <i class="fa fa-search" style="visibility: hidden;"></i><span class="screen-reader-only" style="visibility: hidden;">Search</span>
                    </button>
            </form>
    </div>
<script>
    jQuery(function($) {
    $("#s2").focus(function() {
        $(".cycle-slideshow").cycle("pause");
    });

    $("#s2").focusout(function() {
        $(".cycle-slideshow").cycle("resume");
    });
    $( '#mySlideshow' ).on( 'cycle-initialized', function( event, optionHash ) {
        $( '.cycle-sentinel .cycle-search' ).destroy();
    }); 
    });
</script>

BTW, the accessibility problem is that the sentinel slide is repeated in the first slide and therefore I have two labels attached to the same id (using "for").


javascript jquery jquery-cycle2 cycle2
person Community    schedule 10.03.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward 

In latest version of cycle 2 plugin they removed  id/name from sentinel content.

Пожалуйста, проверьте этот пример jsfiddle.

person Geo George    schedule 10.03.2018
comment
Спасибо, но это не решает мою проблему. Для доступности мне нужно иметь идентификатор в элементе формы, чтобы я мог связать его с меткой, используя for=some-id. Есть несколько способов решить проблему с помощью jquery после рендеринга, но ничто из того, что я делаю с jQuery, не влияет на html слайдера. - person ; 11.03.2018

arrow_upward
0
arrow_downward

Я нашел решение, используя настройки цикла2. Дозорный слайд используется для установки высоты слайд-шоу, но есть несколько опций, которые вы можете реализовать, связанные с этим. Один из них — использовать любой слайд в слайд-шоу в качестве часового. Поскольку только у моего первого слайда была форма, я использовал второй слайд, таким образом:

data-cycle-auto-height=0

Все параметры см. на странице http://jquery.malsup.com/cycle2/api/#auto-height. Форма появляется только один раз в html, как это требуется для доступности.

person Community    schedule 11.03.2018