我正在使用Slick.js旋轉木馬在我正在開發的Wordpress網站上。當我調整瀏覽器窗口大小時,傳送帶不適合它,導致出現水平滾動條。如果我不啓動Slick,則圖像會相應地調整大小,就像您期望的流暢佈局一樣。光滑的旋轉木馬不會調整大小
動態注入一些內聯樣式,其中一個是寬度。您可以看到輪播的所有子div的寬度: Slick inline styles
Slick的正常行爲是在您調整窗口大小時更新這些寬度,但由於某種原因,它不會發生在此網站上。
這裏是鏈接到網站:http://smart.trippple.com.br/
主頁有兩個旋轉木馬,位於這些位置:
- 主#滑蓋家.container .slider會話
- 主#seguradoras .container#seguradoras-carrousel .slider-session
這就是我如何啓動腳本:
$('#slider-home .slider-session').slick({
autoplay: true,
autoplaySpeed: 5000,
arrows: false,
fade: true,
slidesToScroll: 1,
slidesToShow: 1,
speed: 1000
});
$('#seguradoras-carrousel .slider-session').slick({
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
centerMode: true,
mobileFirst: true,
pauseOnHover: false,
slidesToShow: 4
});
這裏是一切我試過到目前爲止:
- 停用所有腳本,除了jQuery和油滑,以確保沒有衝突的發生;
- 測試過不同版本的jQuery;
- 試過包括jQuery Migrate;
- 試圖在網站的標題中加載jQuery + Slick;
- 試圖從容器中取出傳送帶;
- 試圖設置寬度和最大寬度到我的樣式表上的傳送帶div;
試圖用油滑的大小調整方法:
$(窗口).resize(函數(){。 $( '#滑塊家.slider會話')滑頭( '調整大小');} );
研究無處不在,甚至在插件的Github頁面上打開一個問題。插件作者回復說,腳本肯定會調整大小,問題出在我的環境中,他是對的。我創建了一個靜態HTML頁面進行測試,並且傳送帶100%響應。在這個網站上有一些阻止腳本正常行爲的東西。
順便說一句,你將看不到浮油的樣式聯繫在一起,因爲我把它們嵌入到網站的主要樣式。
任何幫助真的很感激!我試圖解決這個問題至少兩週,至少我不知道還有什麼可以嘗試的。任何想法都歡迎。謝謝!
我得到這個錯誤在您的網站,在控制檯上看到。 「NetworkError:404 Not Found - http://smart.trippple.com.br/img/ajax-loader.gif?1462523748」 – technico
我也遇到過這個錯誤,但它似乎沒有關係。我在本地服務器上修復了它,並忘記上傳到測試環境。無論如何,我現在做了。謝謝! –
我有一個類似的問題,原來是由於我的旋轉木馬上的元素在某個斷點處具有負邊界底部(因此與旋轉木馬重疊)而導致的。這在調整窗口大小時似乎會干擾計算。一旦我刪除了負餘量,它完美的工作。 – LifeOnLars