光滑的轮播 - 如果淡入父元素，则第一个图像不显示

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();