滑動滑塊（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） - 隱藏滑塊直到加載

回答

相關問題