加载时，Pics在移动浏览器中消失

Question

我在jacobtarr.github.io有一个网站，我在jacobtarr.github.io/work上发布了我的一些作品。正如您所看到的，我有两张幻灯片：一张是发布单个项目的屏幕截图，另一张是我发布其他项目的预览缩略图。当单击缩略图图像时，DOM将被清空，并填充有关与其关联的特定项目的相关信息。我遇到的问题显然只发生在移动设备浏览器上，当有人点击下方幻灯片中的thumnbnail图像时，上部幻灯片中项目的屏幕截图不会出现。显示所有其他内容，但不是屏幕截图。

从我拍摄的照片中可以看出这一点：第一个是当浏览器缩小到合适的屏幕尺寸时我从Chrome中截取的屏幕截图。当用户点击下方幻灯片中的缩略图图像时，项目屏幕截图显示正常。第二个是我从模拟完全相同行为的iOS模拟器中截取的屏幕截图。

我在我的代码中做了什么呢？如果有任何帮助，我正在使用光滑的滑块插件。如果有人可以帮助我，我会非常感激。我也在下面的JS中发布了必要的函数。

Chrome（浏览器宽度<400px）

iOS模拟器 - iPhone视网膜4英寸（人像）

app.js

    /* Set Slick slider settings
=============================== */
slickSliderConfig = function() {

var projectGalleryArrowPrev = '<a><img class="project-gallery__arrow--prev" src="../img/work/arrow-left-btn.svg"></a>'
var projectGalleryArrowNext = '<a><img class="project-gallery__arrow--next" src="../img/work/arrow-right-btn.svg"></a>'

$('.project-gallery').slick({
    speed: 300,
    slide: 'figure',
    fade: true,
    speed: 600,
    cssEase: 'linear',
    prevArrow: projectGalleryArrowPrev,
    nextArrow: projectGalleryArrowNext
});

$('.more-projects-gallery').slick({
    speed: 300,
    slide: '.more-projects-gallery__thumbnail',
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 4,
    prevArrow: projectGalleryArrowPrev,
    nextArrow: projectGalleryArrowNext,
    responsive: [
        {
            breakpoint: 800,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
                infinite: true
            }
        },
        {
            breakpoint: 680,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2,
                infinite: true
            }
        },
        {
            breakpoint: 410,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                infinite: true
            }
        }
    ]
});
}

/* Initialize slider
=============================== */
$(function(){
    slickSliderConfig();
});
/* Load project content
=============================== */

loadProjectContent = function() {
var $projectContainer = $('.project-container');
var $moreProjectsGalleryImageContainer = $('.more-projects-gallery__thumbnail');
var $moreProjectsGalleryImage = $('.more-projects-gallery__thumbnail img');

// Select specific projects in project-container
var $projectGregMauz = $('#project-gregmauz');
var $projectPersonal = $('#project-personal');
var $projectSyllabus = $('#project-syllabus');
var $projectLemur = $('#project-lemur');

// Select project thumbnails in more-projects-gallery
var $thumbnailGregMauz = $('.more-projects-gallery__thumbnail--gregmauz');
var $thumbnailPersonal = $('.more-projects-gallery__thumbnail--personal');
var $thumbnailSyllabus = $('.more-projects-gallery__thumbnail--syllabus');
var $thumbnailLemur = $('.more-projects-gallery__thumbnail--lemur');

// Hide the non-default specific projects from DOM
$projectPersonal.hide();
$projectSyllabus.hide();
$projectLemur.hide();

// Function for animating scroll
animateScroll = function(element) {
    $('html, body').animate({
        scrollTop: $(element).offset().top
    });
}

// When user clicks Greg Mauz thumbnail image
$thumbnailGregMauz.on("click", function(){
    $projectContainer.children().hide();
    $projectGregMauz.fadeIn(1100).show();
    $('.project-gallery').unslick();
    slickSliderConfig();
    flowTypeConfig();
    animateScroll('#project-gregmauz');
});

// When user clicks Personal thumbnail image
$thumbnailPersonal.on("click", function(){
    $projectContainer.children().hide();
    $projectPersonal.fadeIn(1100).show();
    $('.project-gallery').unslick();
    slickSliderConfig();
    flowTypeConfig();
    animateScroll('#project-personal');
});

// When user clicks Syllabus thumbnail image
$thumbnailSyllabus.on("click", function(){
    $projectContainer.children().hide();
    $projectSyllabus.fadeIn(1100).show();
    $('.project-gallery').unslick();
    slickSliderConfig();
    flowTypeConfig();
    animateScroll('#project-syllabus');
});

// When user clicks Lemur thumbnail image
$thumbnailLemur.on("click", function(){
    $projectContainer.children().hide();
    $projectLemur.fadeIn(1100).show();
    $('.project-gallery').unslick();
    slickSliderConfig();
    flowTypeConfig();
    animateScroll('#project-lemur');
});



}

/* Initialize project content
=============================== */
$(function(){
    loadProjectContent();
});