如何从 Cycle2 哨兵中删除一个元素

How to remove an element from the Cycle2 sentinel

我需要从 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>

顺便说一句,可访问性问题是前哨幻灯片在第一张幻灯片中重复出现,因此我有两个标签附加到同一个 ID(使用 "for")。

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

请检查这个 jsfiddle 示例。

我找到了一个解决方案,使用 cycle2 设置。 sentinel slide 用于设置幻灯片放映高度,但是您可以实现几个与之相关的选项。一种是使用幻灯片中的任意一张幻灯片作为哨兵。由于只有我的第一张幻灯片有表格,所以我使用了第二张幻灯片,因此:

data-cycle-auto-height=0

有关所有选项,请参阅:http://jquery.malsup.com/cycle2/api/#auto-height。根据可访问性的要求,该表单仅在 html 中出现一次。