Jquery slick.js隐藏幻灯片，直到在屏幕上单击元素

我正在使用slick.js（）

我想做的是隐藏幻灯片，直到用户单击页面上的某个元素。问题是，当幻灯片淡入时，我看到的只是下一个和上一个按钮，没有图像

css:

jquery：

    $('#slideshow2').slick({
            accessibility: true,
            adaptiveHeight: true,
            arrows: true,
            variableWidth: true,
            prevArrow: "<i class='fa fa-2x fa-arrow-circle-o-left'></i>",
            nextArrow: "<i class='fa fa-2x fa-arrow-circle-o-right'></i>"
        });

   $('#edgar_head').on('click', function() {
            $('#slideshow2').fadeIn();

        });

 $('#slideshow2').slick({ //initialize, so the slideshow is properly styled //onload
            accessibility: true,
            adaptiveHeight: true,
            arrows: true,
            variableWidth: true,
            prevArrow: "<i class='fa fa-2x fa-arrow-circle-o-left'></i>",
            nextArrow: "<i class='fa fa-2x fa-arrow-circle-o-right'></i>"
        });

        $('#edgar_head').on('click', function() {
            //alert();
            $('#slideshow2').slick('unslick'); //unslick it
             $('#slideshow2').css('display','block'); //change display none to //display block
             $('#slideshow2').slick({ //reinitialize
                accessibility: true,
                adaptiveHeight: true,
                arrows: true,
                prevArrow: "<i class='fa fa-2x fa-arrow-circle-o-left'></i>",
                nextArrow: "<i class='fa fa-2x fa-arrow-circle-o-right'></i>"
                });
            $("#slideshow2").delay( 100 ).animate({"opacity":"1"},1000  ); //fade in by animating opacity

        });

$（'#幻灯片2'）。光滑({
可访问性：是的，
自适应高度：正确，
箭头：是的，
可变宽度：true，
前箭头：“，
下一行：“
});
$（'edgar_head'）。在（'click'，function（）上{
$（“#幻灯片放映2”）.fadeIn（）；
});

有人知道我做错了什么吗？

这是我必须做的： css:

jquery：

    $('#slideshow2').slick({
            accessibility: true,
            adaptiveHeight: true,
            arrows: true,
            variableWidth: true,
            prevArrow: "<i class='fa fa-2x fa-arrow-circle-o-left'></i>",
            nextArrow: "<i class='fa fa-2x fa-arrow-circle-o-right'></i>"
        });

   $('#edgar_head').on('click', function() {
            $('#slideshow2').fadeIn();

        });

 $('#slideshow2').slick({ //initialize, so the slideshow is properly styled //onload
            accessibility: true,
            adaptiveHeight: true,
            arrows: true,
            variableWidth: true,
            prevArrow: "<i class='fa fa-2x fa-arrow-circle-o-left'></i>",
            nextArrow: "<i class='fa fa-2x fa-arrow-circle-o-right'></i>"
        });

        $('#edgar_head').on('click', function() {
            //alert();
            $('#slideshow2').slick('unslick'); //unslick it
             $('#slideshow2').css('display','block'); //change display none to //display block
             $('#slideshow2').slick({ //reinitialize
                accessibility: true,
                adaptiveHeight: true,
                arrows: true,
                prevArrow: "<i class='fa fa-2x fa-arrow-circle-o-left'></i>",
                nextArrow: "<i class='fa fa-2x fa-arrow-circle-o-right'></i>"
                });
            $("#slideshow2").delay( 100 ).animate({"opacity":"1"},1000  ); //fade in by animating opacity

        });

$（'#slideshow2'）.slick（{//initialize，因此幻灯片样式正确//onload
可访问性：是的，
自适应高度：正确，
箭头：是的，
可变宽度：true，
前箭头：“，
下一行：“
});
$（'edgar_head'）。在（'click'，function（）上{
//警惕（）；
$（'#slideshow2'）.slick（'unslick'）；//松开它
$（'#slideshow2'）.css（'display'，'block'）；//将display none更改为//display block
$（'#幻灯片放映2'）。光滑（{//重新初始化
可访问性：是的，
自适应高度：正确，
箭头：是的，
前箭头：“，
下一行：“
});
$（“#slideshow2”）.delay（100）.设置动画（{“不透明度”：“1”}，1000）；//通过设置不透明度动画进行淡入
});

您不需要在CSS中执行任何操作。只需在

#幻灯片2

中显示：无

并加入该守则—

var sliderAdded = false;
$('#edgar_head').click(function(event) {
    // prevent multiple slick calling 
    if(sliderAdded === true) {
        return false;
    }

    $('#slideshow2').stop().fadeIn(function(){
        $(this).slick({
            accessibility: true,
            adaptiveHeight: true,
            arrows: true,
            prevArrow: "<i class='fa fa-2x fa-arrow-circle-o-left'></i>",
            nextArrow: "<i class='fa fa-2x fa-arrow-circle-o-right'></i>"
        });

        sliderAdded = true;
    });
});

var slideraded=false；
$（“#edgar_head”）。单击（函数（事件）{
//防止多次打滑呼叫
如果（sliderAdded==真）{
返回false；
}
$（'#slideshow2'）.stop（）.fadeIn（函数（）{
美元（这个）({
可访问性：是的，
自适应高度：正确，
箭头：是的，
前箭头：“，
下一行：“
});
slideraded=true；
});
});

---

当您在DocumentReady上调用slick时，slick开始绑定其事件，slick发现您的元素的高度为0，因为它的显示为none。在文档以适当的高度显示后，您需要调用slick。我希望这能给你一些提示，为什么它不起作用。

你能把幻灯片放在一个div中，然后显示/隐藏这个div吗？或者你也可以在fadeIn函数回调中调用slick插件。@HADI:显示/隐藏包装并不能实现我想要的。我能够隐藏幻灯片，就像它是。如果我在fadeIn上调用slick插件，那么幻灯片图像在我的页面上显示为图像，而不是幻灯片。你能把代码放在JSFIDLE上吗？