每张幻灯片使用两张图片时的问题

我有一个问题，一直在烦我几天。这里是我将如何描述它，如果你想任何进一步的细节随意问：

我想为每张幻灯片使用两个图像，我想只有一个图像是可见的。当宽度变得小于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

每张幻灯片使用两张图片时的问题

回答

相关问题