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中做任何事情。您已经拥有display:none中的#slideshow2。

并添加此代码 -

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开始绑定其事件并且光滑发现您的元素的高度为0，因为它没有显示。在文档显示正确的高度后，您需要调用光滑。我希望这能让你暗示为什么它不起作用。

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

2 个答案: