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

Question

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

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

css:

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

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

        });

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

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;
}

jquery:

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

        });

Answer 2

您无需在 CSS 中执行任何操作。就像您已经拥有的 #slideshow2 中的 display:none 一样。

并添加此代码 -

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

当您在文档就绪时调用 slick 然后 slick 开始绑定它的事件并且 slick 发现您的元素的高度为 0 因为它正在显示 none。您需要在文档以适当的高度出现后调用 slick。我希望这能给你提示为什么它不起作用。

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

slick.js hide slideshow until click element on screen

jquery

css

slick.js