jquery - slick.js 隐藏幻灯片直到点击屏幕上的元素

Question

我正在使用 slick.js ( http://kenwheeler.github.io/slick/ )。

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

CSS:

#slideshow2 {
  width: 840px;
  margin: 0 auto; 
  display: none;
}

j查询:

    $('#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();

        });

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

Answer 1

这是我必须做的: CSS:

#slideshow2 {
    width: 840px;
    margin: 20px auto; 
    opacity: 0; /* so I can fade it in once display is set to block*/
    display:none;
}

j查询:

 $('#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

        });