滑动滑块（Ken Wheeler） - 隐藏滑块直到加载

我目前使用滑块（Ken Wheeler）滑块功能。它目前只有两个变量被加载到页脚中。滑动滑块（Ken Wheeler） - 隐藏滑块直到加载

 $('.slickSlider').slick({ 
       dots: true, 
       fade: true 
     });

我目前正在体验jquery的准备功能，在那里我可以看到一切突破，直到jquery加载。有无论如何隐藏滑块或解决这个问题？它首先加载，或者直到所有资产完成才加载任何东西。

在此先感谢。

来源

2014-07-09 jagmitg

你有没有想过这个？我正在寻找相同的解决方案。我尝试了@ m.casey的解决方案，但是我无法完成它的工作。 – J82

编辑

如果它只是一个等待，直到文件执行你的脚本，那么下面会工作之前加载，并准备问题：

$(function() { 
    $('.slickSlider').slick({ 
     dots: true, 
     fade: true 
    }); 

    $('.slickSlider').show(); 
});

CSS如下：

.slickSlider { 
    display: none; 
}

这里假设你已经通过Display：隐藏了你的.slickSlider，所以用户不会看到它，直到你取消隐藏通过jQuery。

来源

2014-07-09 16:27:01

对不起，我想我可能一直在上面的帖子中混淆，没有ajax调用，滑块会打破，直到页面被完全加载，然后它修复自己，我需要它，或者它隐藏滑块，直到页面加载或者首先加载滑动滑块 – jagmitg

我编辑了我的回复以演示jQuery的文档准备功能。 –

对不起，这就是它当前包装的内容，只有当dom准备就绪时 – jagmitg

你为什么不使用的document.ready功能：

$(document).ready(function(){ 
    $('.slickSlider').slick({ 
     dots: true, 
     fade: true 
    }); 

    $('.slickSlider').show(); 
});

短期和简单！

来源

2016-04-19 14:26:21

将一个类放在滑块元素上并将其设置为显示：无。在你的CSS，添加

.slick-initialized{ 
    display: block 
}

一个更好的方法是增加不透明度：0您滑盖元素类，然后添加

.slick-initialized{ 
    opacity:1; 
    transition:opacity .3s ease-out; 
}

到你的CSS。

来源

2016-07-24 19:51:11

.slider { display: none; } 
.slider.slick-initialized { display: block; }

这是最简单最卑鄙的方式。

来源

2016-11-18 05:39:06 Buts

这可以帮助我！谢谢！ –

完美，无需JS – zanderwar

我既不想使用.show()也不使用.slick-initialized因为它取决于可以更改的3d方脚本。我注意到，我的源代码如下所示：

<div id="main-slider-whatever"> 
    <div> 
     <a href=""> 
      <img src="1.jgp /> 
     </a> 
    </div> 
    <div> 
     <a href=""> 
      <img src="2.jgp /> 
     </a> 
    </div> 
    ... 
</div>

但华而不实创造大量图像周围的包装，所以我加入到我的CSS

#main-slider-whatever>div>a>img { 
    display: none; 
}

仅支持此序列的隐藏只有当他们的图像我的容器的直接孩子没有任何额外的光滑类，在初始化后添加

来源

2017-02-28 11:44:43 vladkras

滑动滑块（Ken Wheeler） - 隐藏滑块直到加载

回答

相关问题