2017-03-18 72 views
0

我正在嘗試重新學習一些CSS,在編碼多年之後。我正在嘗試重新創建一個wordpress模板,並有一個圖像滑塊的問題。滑動滑塊圖像重疊和斷開按鈕

我已經嘗試了幾個,並已在http://kenwheeler.github.io/slick/解決,但我有我的圖像重疊的問題。他們都是相同的尺寸,我已經在網上搜索,但無法找到答案。

左側和右側箭頭的圖像被打破,滑塊下面的點也是如此,對此有何建議?

我的網站是在這裏:http://rdoyle.info/temp/

+2

你可以發佈代碼的問題和一個JSFiddle,如果適用 –

+0

其不重疊..我想你需要的是'中心:假'在你的光滑的初始化代碼,也可能必須設置字符集爲UTF -8使用中繼標記,我希望 – Manjunath

+0

我確實改變了centerMode:false,這似乎做了一個重大的改變,但圖像沒有填充整個寬度的滑塊,所以你一次看到兩個圖像。 – DezUk

回答

0

預期的行爲是不是從你的問題十分清楚。如果您想使圖像與幻燈片一樣寬,則需要設置它們的min-width。例如:

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

如果要增加幻燈片之間的間距,可以通過設置邊距來完成。您可以將它們放在幻燈片或其內容上。我個人更喜歡幻燈片粘在一起,它讓我更好地控制動畫功能。這裏的要點是光滑的會自動調整。例如:

.slick-slide img { 
    margin: 0 50px; 
} 

爲了將二者結合起來,你必須從width扣除margin S,使用calc

.slick-slide img { 
    min-width: calc(100% - 100px); 
    margin: 0 50px; 
} 

請務必閱讀slick文檔。如果您不想因重繪過程而感到「驚訝」,則需要了解每個功能並按預期使用它。否則它會對你有用,而且從經驗來看,禁用內部光滑行爲(不破壞它的功能)並不是一件容易的事。

提示:設置視覺助手,使您能夠看到你感興趣的內容(我個人使用的元素紅/白/黑1px邊框,而我建立的動畫,才能夠看到他們在行動)。

+0

我已經嘗試使用類slick-slider img將此添加到我的main.css中,但它沒有對網站產生任何影響。你可以給他們一些更多的信息或一個完整的例子,對不起,我對這一切都很陌生。 – DezUk

+0

@DezUk,如果我使用dev控制檯手動將最後一個片段添加到'main.css',圖像是全寬(減去100px)並居中。您要麼沒有保存更改,要麼沒有將其上載到服務器上,或者沒有清除緩存。你應該做所有這些才能看到變化...... –

+0

雖然我的箭頭現在無法正常顯示,但安全帽確實能夠工作 – DezUk