每張幻燈片使用兩張圖片時的問題

我有一個問題，一直在煩我幾天。這裏是我將如何描述它，如果你想任何進一步的細節隨意問：

我想爲每張幻燈片使用兩個圖像，我想只有一個圖像是可見的。當寬度變得小於800px時，我想將圖像更改爲另一個。我用簡單的CSS做到了這一點。它有效，但有一個問題。

當滑塊突然變幻滑動時，應該看不到的圖像出現在應該可見的圖像下，但只要圖像退出滾動，圖像就會立即消失。

我不想讓圖像一起顯示。我如何解決這個問題？

我無法弄清楚的jsfiddle是如何工作的，但這裏是一些代碼：

#twins7-0 { 
 
\t display: none; 
 

 
} 
 

 
#pizza13-0 { 
 
\t display: none; 
 
} 
 

 
#twins1-0 { 
 
\t display: none; 
 
} 
 

 
@media screen and (max-width: 800px) { 
 

 
\t #twins7-0 { 
 
\t \t display: block; 
 
\t } 
 

 
\t #twins7-1 { 
 
\t \t display: none; 
 
\t } 
 
\t #pizza13-0 { 
 
\t \t display: block; 
 
\t } 
 

 
\t #pizza13-1 { 
 
\t \t display: none; 
 
\t } 
 

 
\t #twins1-0 { 
 
\t \t display: block; 
 
\t } 
 

 
\t #twins1-1 { 
 
\t \t display: none; 
 
\t } 
 

 
}

\t <div class="slider-container"> 
 
\t \t <div class="slider"> 
 
\t \t \t <div class="slider-content"> 
 
\t \t \t \t <div id="pizza"> 
 
\t \t \t \t \t <img src="img/twins-stock/store-images/pizza13-1.jpg" alt="pizza" id="pizza13-1"> 
 
\t \t \t \t \t <img src="img/twins-stock/store-images/pizza13.jpg" alt="pizza" id="pizza13-0"> 
 

 
\t \t \t \t </div> 
 
\t \t \t \t <div class="slider-text" id="pizza-text"> 
 
\t \t \t \t \t <h1>Pizza med färska råvaror</h1> 
 
\t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error id dignissimos ut?</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="slider-content"> 
 
\t \t \t \t <div id="twins1"> 
 
\t \t \t \t \t <img src="img/twins-stock/store-images/pizza12-1.jpg" alt="twins1" id="twins1-1"> 
 
\t \t \t \t \t <img src="img/twins-stock/store-images/pizza12.jpg" alt="twins1" id="twins1-0"> 
 

 
\t \t \t \t </div> 
 
\t \t \t \t <div class="slider-text" id="twins1-text"> 
 
\t \t \t \t \t <h1>Pizza med färska råvaror</h1> 
 
\t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="slider-content"> 
 
\t \t \t \t <div id="twins7"> 
 
\t \t \t \t \t <img src="img/twins-stock/store-images/twins7-1.jpg" alt="twins7" id="twins7-1"> 
 
\t \t \t \t \t <img src="img/twins-stock/store-images/twins7.jpg" alt="twins7" id="twins7-0"> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="slider-text" id="twins6-text"> 
 
\t \t \t \t \t <h1>Pizza med färska råvaror</h1> 
 
\t \t \t \t \t <p>Deserunt, quam, voluptate! Error id dignissimos ut? Dorro harum deleniti aliquam.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

來源

2016-08-27 Da. Syntex

爲什麼但爲什麼。別。只使用一個圖像。壓縮它的網頁。即使圖像設置爲「display：none」，該圖片仍然由瀏覽器下載。你迫使人們加載他們很可能永遠不會看到的圖像。相反，找到另一種方式來保持您的視覺效果對不同設備的響應。 CSS3是你的朋友。（或者在服務器端檢測請求的媒體設備並相應地服務更小的圖像） –

感謝您的評論。我是新手，所以我沒有真正想到這一點。你知道我能做什麼嗎？當瀏覽器寬度較小時，我希望圖像更大。 –

首先，你應該使用類，而不是很多不同的ID號的，它會讓你的代碼更加精簡，易於管理！

話雖如此，我發現你的css規則可能被slick的風格所覆蓋。要正確覆蓋它們，你可以重新排列你的css的優先級（也許slick的css在你之後加載），或者你可以在你的css中更具體：here's a good article about that kind of thing。

這裏是一個JSFiddle我放在一起：https://jsfiddle.net/kuxzs7sz/1/。你可以通過使用類看到我能夠刪除多少css，並且它完全一樣。爲了安全起見，我還使用了媒體查詢，以便第一個圖像僅顯示在較大的屏幕上：

@media screen and (min-width: 801px) { 
    .slick-slide img.big{ 
    display: block; 

    } 
    .slick-slide img.small { 
    display: none; 
    } 
} 

@media screen and (max-width: 800px) { 
    .slick-slide img.big{ 
    display: none; 
    } 

    .slick-slide img.small { 
    display: block; 
    } 
}

來源

2016-08-27 15:51:12 mmmoustache

每張幻燈片使用兩張圖片時的問題

回答

相關問題