光滑的旋轉木馬不會調整大小

我正在使用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％響應。在這個網站上有一些阻止腳本正常行爲的東西。

順便說一句，你將看不到浮油的樣式聯繫在一起，因爲我把它們嵌入到網站的主要樣式。

任何幫助真的很感激！我試圖解決這個問題至少兩週，至少我不知道還有什麼可以嘗試的。任何想法都歡迎。謝謝！

來源

2016-08-03 Gabriel Bonifacio

我得到這個錯誤在您的網站，在控制檯上看到。「NetworkError：404 Not Found - http://smart.trippple.com.br/img/ajax-loader.gif?1462523748」 – technico

我也遇到過這個錯誤，但它似乎沒有關係。我在本地服務器上修復了它，並忘記上傳到測試環境。無論如何，我現在做了。謝謝！ –

我有一個類似的問題，原來是由於我的旋轉木馬上的元素在某個斷點處具有負邊界底部（因此與旋轉木馬重疊）而導致的。這在調整窗口大小時似乎會干擾計算。一旦我刪除了負餘量，它完美的工作。 – LifeOnLars

你有沒有試過敏捷響應選項？我不知道這是否是你正在尋找的答案，但這是我做我的滑塊基於瀏覽器調整大小的工作。

$('#seguradoras-carrousel .slider-session').slick({ 
    autoplay: true, 
    autoplaySpeed: 2000, 
    arrows: false, 
    centerMode: true, 
    mobileFirst: true, 
    pauseOnHover: false, 
    slidesToShow: 4, 
    //start responsive option 
    responsive: [ 
    { 
     breakpoint: 600, //at 600px wide, only 2 slides will show 
     settings: { 
     slidesToShow: 2, 
     slidesToScroll: 2 
     } 
    }, 
    { 
     breakpoint: 480, //at 480px wide, only one slide will show 
     settings: { 
     slidesToShow: 1, 
     slidesToScroll: 1 
     } 
    } 
    ] 
});

來源

2016-08-03 23:39:43

也看起來像你需要使你的容器響應，例如在最大寬度1199改變你的容器寬度是一個百分比，而不是PX。 –

我確實試過了，是的。當我這樣做時，Slick只會改變所顯示的幻燈片的數量，但寬度保持不變（以及滾動條）。容器響應 - 我使用Susy。如果您在沒有輪播的情況下訪問另一個頁面（比如http://smart.trippple.com.br/quem-somos/），您會看到所有內容都可以很好地適應。感謝您的回答！ –

也許如果你強迫光滑來調整窗口上調整，這將適應：

$(window).resize(function() { 
    $('#slider-home .slider-session').slick('resize'); 
    $('#seguradoras-carrousel .slider-session').slick('resize'); 
});

來源

2016-08-03 23:51:42 technico

是的，@technico，我也試過了，忘了提及！它也沒有工作。我會更新我的問題。感謝您的回答！ –

這對我來說有一個類似的問題：我正在銷燬並重新創建垂直滑塊，但直到我使用'$（'。slide'）。slick（'resize'）'時纔得到正確的高度，我沒有在在線文檔中找到。 –

在我來說，我其實是缺失的圖像拉伸

.slick-slide img {width: 100%;}

來源

2017-03-15 10:26:55 mdob

光滑的旋轉木馬不會調整大小

回答

相關問題