jquery - Slick carousel - 如果在父元素中淡入淡出，则第一张图片不会显示

Question

我正在使用 Ken Wheeler 的漂亮旋转木马。

我的幻灯片的父元素淡出 (fadeOut())。

当我点击某物时，我希望父元素和幻灯片淡入。

除手机外，一切都很好，至少在 Android 上是这样。在我的 Android 手机上，第一张图片无法加载。

如果我不淡出父元素，只是将不透明度设置为 0，那么幻灯片的第一张图片就会出现，但是我的主页上有一个很大的空间隐形元素是。

有人知道怎么处理吗？

jQuery:

$('.bridge_story_mobile').fadeOut(); // they need to be display:block 

$('.bridge_holder').on('tap', function() {
    var mobile_toshow = $(this).attr('id');
    mobile_toshow = mobile_toshow.replace('holder_', '');
    mobile_toshow = mobile_toshow + "_mobile";

    $('#' + mobile_toshow).detach().insertAfter('.bridges_wrapper');

    $('.bridges_wrapper').fadeOut(1200, function() {
        $('.bridge_story_mobile').css('display', 'none');
        $('#' + mobile_toshow).css({"opacity":"0", 'display':'block'});
        $('#' + mobile_toshow).animate({"opacity":"1", 'z-index':'2'},2000);
        $('.mobile_close').animate({"opacity":"1", 'z-index':'99'},2000);
        var $slider = $('.slider')
            .on('init', function(slick) {
                console.log('fired!');
                $('.slider').fadeIn(3000);
            })
            .slick({
                fade: true,
                focusOnSelect: true,
                lazyLoad: 'ondemand',
                speed: 1000
            });
        $('html,body').animate({
              scrollTop: $("#mobile").offset().top -0
        }, 1500);
    });
});

Answer 1

问题似乎是因为您在隐藏 html 时初始化插件，所以它给所有 div 设置了 0px 的大小。

要解决此问题，您可以在每个幻灯片显示可见后对其运行刷新:

$('#ss_mobile_mainstory')[0].slick.refresh();