打开基础显示模式时将焦点设置在光滑的幻灯片上答案

【问题标题】：Set Focus on slick Slide when foundation reveal modal is opened打开基础显示模式时将焦点设置在光滑的幻灯片上
【发布时间】：2018-02-24 09:17:29
【问题描述】：

仅当焦点位于幻灯片上时，左右滑动键绑定才有效。当打开显示模式时，焦点不在幻灯片上，因此键绑定不起作用。我正在寻找一种方法来正确设置焦点或设置更多全局键绑定，但请记住，页面上可能有多个画廊。任何建议将不胜感激。

$('.galleryGroup').each(function(){
    if (typeof $(this).data('gallery') !== 'undefined'){ 
        var id = $(this).data('gallery');
        // Open reveal on click
        $('.galleriesImage'+id).click(function(){
            // Open Reveal Modal
            $('#galleriesReveal'+id).foundation('open');
            // Cancel Any previously created reveals    
            $(window).on('closed.zf.reveal',function(){ $('#slides'+id).slick('unslick'); });
            // Set the inital slide 
            if (typeof jQuery(this).data('ref') !== 'undefined'){ var iid=jQuery(this).data('ref'); }else{var iid=0;}
            // Initiate slideshow
            $('#slides'+id).slick({infinite: true,dots: false,lazyLoad: 'ondemand',autoplay: false,initialSlide: iid});
            // Set focus on the slideshow

            $('something').focus();

        }).css('cursor','pointer');
    }
});

【问题讨论】：

标签： zurb-foundation slick.js zurb-foundation-6 zurb-reveal

【解决方案1】：

只有当按钮之一（上一个/下一个）聚焦或其中一张幻灯片时，它才有效。当你聚焦整个幻灯片时它不起作用

$(document).ready(function(){
  $(document).foundation();
  $('.galleryGroup').each(function(){
    if (typeof $(this).data('gallery') !== 'undefined'){ 
      var id = $(this).data('gallery');
      // Open reveal on click
      $('.galleriesImage'+id).click(function(){
        // Open Reveal Modal
        $('#galleriesReveal'+id).foundation('open');
        // Cancel Any previously created reveals    
        $(window).on('closed.zf.reveal',function(){ $('#slides'+id).slick('unslick'); });
        // Set the inital slide 
        if (typeof jQuery(this).data('ref') !== 'undefined'){ var iid=jQuery(this).data('ref'); }else{var iid=0;}
        // Initiate slideshow
        $('#slides'+id).slick({infinite: true,dots: false,lazyLoad: 'ondemand',autoplay: false,initialSlide: iid});
        // Set focus on the first slide
        //setTimeout(function() {
          $('#slides'+id+' .slick-slide').eq(0).focus()
        //}, 0);
      }).css('cursor','pointer');
    }
  });
});

一般来说，有很多部分可以使用 Foundation Sites API 和代码中更好的逻辑进行简化。

https://codepen.io/DanielRuf/pen/RQmPbd

【讨论】：

我知道如何观看揭幕。编码问题出现在您拥有//run focus here 的地方。
你也可以使用 $(this).find(...) 我建议切换到更好的 Swiper。
$(this).find() 什么哈哈。有 30 个元素可以尝试关注。 Swiper 并不好，因为它的代码臃肿，有许多客户不使用的功能。这意味着更慢的加载时间。 Slick 加载时间减半，并且已经内置到我们的高级主题中。
Swiper 可以以模块化方式使用（ES6）。
正如我所说，我没有使用 Swiper，所以您可以帮助解决有关 slick 的问题或停止评论。