当基础显示模式打开时,将焦点设置为光滑幻灯片

时间:2018-02-24 09:17:29

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

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

$('.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');
    }
});

1 个答案:

答案 0 :(得分:1)

通过光滑,只有当其中一个按钮(上一个/下一个)被聚焦或其中一个幻灯片时,它才有效。当您关注整个幻灯片时,它不起作用

FXMLLoader

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

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