光滑的旋转木马-如果在父元素中褪色，那么第一个图像就不会显示

Question

我在用肯·惠勒的光滑旋转木马。

幻灯片的父元素已淡出(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();